Embedded App (Development) - App Bridge Not Working

[golfmonke]

<AppProvider apiKey="7df233c40abd54e854c427eb9fa8b64c" shopOrigin="easyoptionsstore.myshopify.com" forceRedirect={true}>
     
      <Provider store={store}>
        <BrowserRouter>
          <Switch>
........

I have the apiKey set on the AppProvider.

I've installed the @shopify/app-bridge.

I can see the app-bridge is loaded in the browser using the Chrome Developer Tools.....

There is no X-Frame-Options header deny.

The rest of the app works fine.

It's just the App-Bridge components that don't work.



ie - the Page actions are hidden and don't show up where they should in the app title section at the top.

ie - The ResourcePicker component will not display.


I'm out of ideas on what to try next.


My app is configured using 2 ngrok URLs, both https, not sure if it matters that they are different.

[golfmonke]

My app is set as an embedded app in the App Setup.....

I'm currently in development, and testing this using a test store.

Tested on both Chrome & Firefox as my browser.  Windows 10.

pic attached..

[Alex]

Would you mind sharing your full top level component stack? I can try to mimic what you've got in a react app of my own and see what might be going on if this issue is ongoing for you. If you've found a fix, reporting that here would also be appreciated!