App Bridge update not working properly with node template

Shopify Apps

Topic summary

A developer reports issues after updating to the new App Bridge implementation following official documentation. Two specific problems have emerged:

Issue 1: Resource picker fails to open when using the shopify.ensureInstalledOnShop() middleware (required for embedded apps).

Issue 2: Navigation attempts using either react-router-dom or the useNavigate hook/open function crash the page due to a “frame-ancestors: none” CSP (Content Security Policy) error that prevents the URL from being framed.

The developer is seeking solutions to these problems or guidance on whether to revert to the old App Bridge implementation. The discussion remains open with no resolution provided yet.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

Since the App Bridge implementation got updated, I followed the docs to update it for my app as well. After the update, app loads normally, no problems with that, but then there are two action based errors/bugs that I’ve spotted so far.

  1. If we have shopify.ensureInstalledOnShop() middleware (which I should have, because my app is embedded), the resource picker is not opening.
  2. If I try to navigate either using react-router-dom useNavigate hook or using open function like shown in the documentation, the page crashes, and that’s because it refuses to frame the url due to “frame-ancestors: none” issue.

@Shopify_77 is there any solution to this problems or should I just keep using the old App Bridge implementation ?