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!
1 Reply
Hello,
Are you rendering dates or anything like that? Note that dates change based on the region of the browser and you should account for that when rendering them. That is the most typical reason for hydration errors