GD
Gadget Developers•4d ago
Namish kapoor

Hydration Issues Suddenly Made the app stop

I am facing with this error continously in gadget and I am not able to proceed with the development anymore
No description
3 Replies
Namish kapoor
Namish kapoorOP•4d ago
No description
Namish kapoor
Namish kapoorOP•4d ago
Just for more additonal context when I am removing these script tags, the hydration error stops
No description
Chocci_Milk
Chocci_Milk•4d ago
Hello, I would recommend that your Layout component look like this at the base: 
export const Layout = ({ children }: { children: React.ReactNode; }) => {
  return (
    <html lang="en">
      <head>
        <Meta />
        <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js" suppressHydrationWarning={true}></script>
        <Links />
      </head>
      <body>
        <Suspense fallback={<FullPageSpinner />}>
          {children}
        </Suspense>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
};
export const Layout = ({ children }: { children: React.ReactNode; }) => {
  return (
    <html lang="en">
      <head>
        <Meta />
        <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js" suppressHydrationWarning={true}></script>
        <Links />
      </head>
      <body>
        <Suspense fallback={<FullPageSpinner />}>
          {children}
        </Suspense>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
};
I think that the important part you're missing is the suppressHydrationWarning attribute

Did you find this page helpful?