hydration issues - app is not loading on shopify embedded windows while working in preview
Hey folks, looking for help with a hydration issue in my Gadget.dev Shopify app.
Everything works fine in Gadget preview, but when I load the app in Shopify Admin (as an embedded app), I get this warning and error:
pgsql
Copy
Warning: Did not expect server HTML to contain a <div> in <div>.
Error: Hydration failed because the initial UI does not match what was rendered on the server.
I'm using Remix + Polaris + @gadgetinc/react-shopify-app-bridge. The stack trace points to PortalsContainerComponent and Polaris portals. It looks like App Bridge might not be initializing correctly or early enough, maybe because the API key/host isn’t passed the way App Bridge expects. Could this be related to Gadget’s injection of gadgetConfig?
Has anyone run into this and found a clean fix?
I tried ensuring PolarisPortalsContainer is rendered server-side, but the error persists. Would love any tips on App Bridge setup or hydration-safe Remix setup. Thanks!
Everything works fine in Gadget preview, but when I load the app in Shopify Admin (as an embedded app), I get this warning and error:
pgsql
Copy
Warning: Did not expect server HTML to contain a <div> in <div>.
Error: Hydration failed because the initial UI does not match what was rendered on the server.
I'm using Remix + Polaris + @gadgetinc/react-shopify-app-bridge. The stack trace points to PortalsContainerComponent and Polaris portals. It looks like App Bridge might not be initializing correctly or early enough, maybe because the API key/host isn’t passed the way App Bridge expects. Could this be related to Gadget’s injection of gadgetConfig?
Has anyone run into this and found a clean fix?
I tried ensuring PolarisPortalsContainer is rendered server-side, but the error persists. Would love any tips on App Bridge setup or hydration-safe Remix setup. Thanks!
