Any <Script /> with strategy="beforeInteractive" in RootLayout causes hydration errors #51242

ethanfann · 2023-06-13T15:51:05Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:52:24 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.6-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Script optimization (next/script)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/ethanfann/beforeInteractive-script-rootLayout-hydration-errors

To Reproduce

git clone https://github.com/ethanfann/beforeInteractive-script-rootLayout-hydration-errors
cd beforeInteractive-script-rootLayout-hydration-errors
npm install
npm run dev
Navigate to localhost:3000
View hydration errors

Describe the Bug

Following the docs for loading a script using the beforeInteractive strategy within a RootLayout results in hydration errors.

Ex:

import Script from 'next/script'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script
        src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"
        strategy="beforeInteractive"
      />
    </html>
  )
}

Expected Behavior

No hydration errors should occur with barebones example sites that follow official documentation.

Which browser are you using? (if relevant)

Chrome 114.0.5735.106 (Official Build) (arm64)

How are you deploying your application? (if relevant)

No response

The text was updated successfully, but these errors were encountered:

tdsprogramming · 2023-06-23T22:40:55Z

I am having this issue as well - any updates? @ethanfann Did you find a solution?

zhangxinyong12 · 2023-06-26T06:48:03Z

I had the same problem. Have you solved it？

zhangxinyong12 · 2023-06-26T07:26:25Z

donalffons · 2023-07-08T12:31:00Z

Having the same issues. I was also expecting this to work as shown in the original issue, based on the documentation and the fact that you could insert beforeInteractive scripts anywhere into _document.tsx with the good old page router.

@zhangxinyong12's workaround (of putting the <Script> into the <head> element) seems to work, though.

igordanchenko · 2023-07-10T20:45:23Z

There is one more related issue - ESLint is complaining about beforeInteractive being used outside of pages/_document.js (doh)

./app/layout.tsx
31:17 Warning: next/script's beforeInteractive strategy should not be used outside of pages/_document.js. See: https://nextjs.org/docs/messages/no-before-interactive-script-outside-document @next/next/no-before-interactive-script-outside-document

Had to suppress this false positive.

{/* eslint-disable-next-line @next/next/no-before-interactive-script-outside-document */}

JonatasCopernico · 2023-07-19T20:39:30Z

Having the same issues. I was also expecting this to work as shown in the original issue, based on the documentation and the fact that you could insert beforeInteractive scripts anywhere into _document.tsx with the good old page router.

@zhangxinyong12's workaround (of putting the <Script> into the <head> element) seems to work, though.

Tried doing that and the script disappeared... If I don't use the the script goes to the body (and I need the script at the head). Did you solve it?

patricktansg · 2023-07-20T02:14:43Z

@JonatasCopernico Can update here too if you manage to get it work in head with the AppRouter because I'm also searching this for a while but didn't manage to get it works.

desnor · 2023-08-24T23:45:47Z

@ethanfann Does it make any difference if you place the Script tag inside the body tag? In the first example at the top of this issue it is actually after the body's closing tag, which I don't really know, but might be a problem. I am using multiple Script tags with strategy="beforeInteractive" inside the body tag and they are being loaded and the client side rendering is happening without any hydration issues.

What I'm suggesting to is to change the top example to this:

import Script from 'next/script'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"
          strategy="beforeInteractive"
        />
      </body>
    </html>
  )
}

buesing · 2023-08-30T11:05:01Z

I have the same problem. I'm doing it exactly as described in the documentation here and getting hydration errors (and a linter warning). I feel like the docs should be updated to reflect the way it's supposed to be done?

add actual preferred color theme switch support via cookies ⚠️ This commit introduce several issues directly linked to the App Router's current limitations : 1. preferred-color-scheme isn't supported anymore 2. every route is now dynamically rendered by default as we use cookies in the root layout A better approach would be to load a client script as "beforeInteractive" to (1) check if a "color-theme" preferrence has been set in the local storage (2) if not, set it based on preferred-color-scheme and (3) add or remove the 'dark' class on document.documentElement accordingly. Then, the DarkModToggle element could work exactly as it is, but using the local storage instead of a cookie. Unfortunately, this wouldn't be a better approach at the moment as the Next.js Script component isn't supported by the App Router. see vercel/next.js#51242 and https://nextjs.org/docs/app/api-reference/functions/cookies and https://nextjs.org/docs/pages/api-reference/components/script#beforeinteractive inspired by https://michaelangelo.io/blog/darkmode-rsc

fuccsoc · 2023-09-16T22:57:16Z

Still here...

deverin · 2023-09-20T22:01:32Z

UPDATE 23/09: Don't use edge runtime if you want this to work

Hello Everyone

After fiddling around with this next/script component after reading your inputs, I manged to find a working solution. I need someone to confirm it.

I am on nextjs 13.4.19

Try this

First of all, make your Script component empty closing
<Script src="https://yourURL.to/somewhere/script.is.js" strategy="beforeInteractive"></Script>
Place it in root layout
note: async and usual functional component worked
- right after <body> or
- right before </body>
Both of them worked for me

This also eliminated two issues for me:

Error - server-client mismatch
Warning - the resource was preloaded using link preload but not used within a few seconds

Result
Bunch of stuff gets pushed into the <head> but with this way around your <head> you should end up having two more tags:

<link rel="preload" as="script" href="https://yourURL.to/somewhere/script.is.js"> - comes higher in the <head>
<script src="https://yourURL.to/somewhere/script.is.js"></script> - comes after the <link> above

Could someone please confirm?

jaapaurelio · 2023-10-03T14:40:45Z

Adding the <Script> with strategy="beforeInteractive" inside body or head it's creating hydrations errors, even following @deverin guidelines.

Warning: Expected server HTML to contain a matching <div> in <div>.

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

Next 13.5.4

-- Edit --
Adding right after <body> tag worked for me. Not woking any other place.

deverin · 2023-10-03T15:13:12Z

Adding the <Script> with strategy="beforeInteractive" inside body or head it's creating hydrations errors, even following @deverin guidelines.
Warning: Expected server HTML to contain a matching <div> in <div>.
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
Next 13.5.4

-- Edit --

Adding right after <body> tag worked for me. Not woking any other place.

Did you use open and closing component tags? Like this:

<Script></Script>

not self closing

<Script/>

I have hydration issue when I use self-closing tag

I am on Next.js 13.4.9

Could you confirm please :)

NielsVdA · 2023-11-09T12:27:40Z

Even with deverin's setup (including <Script></Script>) Im still getting the hydration errors.
Can you maybe post your (root) layout file in total to make sure we're doing the same thing?

Dynalon · 2023-11-23T16:58:46Z

This bug was giving me a real headache (I had an external script which is a wasm polyfill that was indeterministically present/not present depending on load speeds) until @deverin workaround. It works for me now (using all his mentioned steps!).

joshunger · 2023-12-29T18:12:26Z

If placed in <head> you also receive this warning (adding so others can find this issue):

Warning: Prop `dangerouslySetInnerHTML` did not match. Server: "" Client: "(self.__next_s=self.__next_s||[]).push([0,{\"children\":\"\\n          window.dataLayer = window.dataLayer || [];\\n          function gtag(){dataLayer.push(arguments);}\\n          gtag('consent','default',{\\n            'ad_storage':'denied',\\n            'analytics_storage':'denied',\\n            'wait_for_update': 500\\n          });\\n          gtag('set', 'ads_data_redaction', true);\\n          \"}])"
    at script
    at Script (webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/script.js:175:13)
    at head
    at html

And the other common warning with this issue -

The resource ... was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

plrthink · 2024-01-19T07:12:24Z

I found even using next/script with strategy="beforeInteractive" right inside the body tag, the scripts are getting executed before next and application code, actually they are injected after the initial assets. This makes polyfills not working.

nvsd · 2024-02-01T17:09:14Z

I'm getting this as well. Even doing the above workaround still gives me several errors.

@leerob any chance you could let us know what's happening with this? It's hard to convince my team that transitioning to next is a good idea when on render in dev you get several unavoidable errors right away.

altano · 2024-02-02T00:16:20Z

Thank you for editing your message.

Let’s all remember that this is a free, open source framework and we’re all on the line for fixing things. We are not entitled to a fix from Vercel.

nvsd · 2024-02-02T19:05:32Z

@altano Stop.
To be clear I only edited my message to remove mildly frustrated language. Let's not turn this into something it's not.

We are not entitled to a fix from Vercel.

Cmon man, are you serious? I'm not saying we're entitled to a fix. Vercel is a company that makes profit (~60 million?) by getting people to use their framework and deploy that on their infrastructure. They've provided no update on this issue. Of course I'm frustrated when I'm seeing an issue like this that hasn't gotten any response in 6 months.

If my statement is unhelpful then you coming in here and adding a nothing burger comment like that is even more so.

altano · 2024-02-03T00:51:16Z

I only edited my message to remove mildly frustrated language.
...
I'm not saying we're entitled to a fix.

Perfect, sounds like we're in total agreement!

jSadoski · 2024-02-06T17:13:05Z

Just wanted to pop in here with my experience.

I needed to add a cookie consent manager as a beforeInteractive script. I followed all steps outlined by @deverin, with the caveat that my script was an inline script. I put my <Script></Script> tag immediately below and before .

The script tag is in the head, but hydration still fails and Next.js switches to client-side rendering.

Hopefully they're able to provide better support for beforeInteractive scripts in App Router soon.

Quick note about @jaapaurelio's approach: This populated the script in the body for me, which would not fit the behavior I needed from beforeInteractive.

EDIT: I previously said this worked without issues, but I was mistaken. My console errors were being minified, which I didn't realize was the hydration error in production.

willstaff · 2024-02-19T17:08:43Z

Also encountering this issue, and disabling edge runtime isn't an option I have. Has anyone discovered any workarounds for this?

borzaka · 2024-02-22T13:18:32Z

I'am trying to implement the CookiePro by OneTrust script. The script needs to be inside the <head>.

I have followed the official docs: https://nextjs.org/docs/app/api-reference/components/script#beforeinteractive

Inside my src/app/layout.tsx:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="hu">
      <body>{children}</body>

      {/* eslint-disable-next-line @next/next/no-before-interactive-script-outside-document,react/self-closing-comp */}
      <Script
        src="https://cookie-cdn.cookiepro.com/scripttemplates/otSDKStub.js"
        charSet="UTF-8"
        data-document-language="true"
        data-domain-script="XXXX"
        async
        strategy="beforeInteractive"
      ></Script>
    </html>
  );
}

And I'am getting this error:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <script> in <html>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

I have tried to follow deverin, but with no luck.

Next.js version 13.5.6

salikn · 2024-03-17T02:30:07Z

any luck solving this problem? I'm trying to add OneTrust through beforeinteractive and i'm heaving the same error.

borzaka · 2024-03-17T21:31:35Z

My solution: put it directly inside the native <head> in the root layout, and use the native <script> tag.

I know it's the opposite as the docs says/recommends, but it was the only solution that worked for me.
I understand that with this solution I'am not benefiting from any Next.js optimizations.

layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="hu">
      <head>
        <CookiePro />
      </head>
      <body>{children}</body>
    </html>
  );
}

cookiepro.tsx

export function CookiePro() {
  return (
    <>
      <script
        src="https://cookie-cdn.cookiepro.com/scripttemplates/otSDKStub.js"
        charSet="UTF-8"
        data-document-language="true"
        data-domain-script="XXXX"
        async
      ></script>

      <script
        dangerouslySetInnerHTML={{
          __html: `
            ...
          `,
        }}
      ></script>
    </>
  );
}

salikn · 2024-03-17T23:08:16Z

Thanks @borzaka Yes this one actually work,
What about cookie table list etc..? you had to use dangerouslySetInnerHTML to set the html fragment that comes from OT right?

borzaka · 2024-03-18T08:56:11Z

Yes @salikn, you can add more native <script>s with dangerouslySetInnerHTML:

<script
  dangerouslySetInnerHTML={{
    __html: `
      ...
    `,
  }}
></script>

huozhi · 2024-03-18T10:39:56Z

Putting Script in the head or body are the way to go, I filed two PRs to improve this:

feat(error-overlay): handle script under html hydration error #63403 will help error the React hydration error message with the incorrect behavior in the error overlay
docs: fix next/script example causing hydration errors #63401 update the docs to correct the bad use case in nextjs documentation

script tag cannot be placed under html directly, users reported a case in #51242 that having `<Script>` under html will cause hydration error, this will display the React hydration error related warning of bad usage for it. You will see this warning in dev overlay instead of displaying nothing ``` In HTML, <script> cannot be a child of <html>. This will cause a hydration error. ``` Added two other react warnings detection patterns as well * `Warning: In HTML, text nodes cannot be a child of <%s>.\nThis will cause a hydration error.',` * `Warning: In HTML, whitespace text nodes cann...` But tested they're not generating hydration errors, only warnings in console, so we don't need to have tests for them. Closes NEXT-2835

Related #51242 React will error `In HTML, <script> cannot be a child of <html>. This will cause a hydration error.` when `script` is rendered under `html` directly. The examples in our docs are causing this hydration error. Moving it under `body` tag will fix the hydration error Closes NEXT-2834 Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>

github-actions · 2024-04-02T00:04:00Z

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

ethanfann added the bug Issue was opened via the bug report template. label Jun 13, 2023

github-actions bot added the area: app App directory (appDir: true) label Jun 13, 2023

housseindjirdeh self-assigned this Jun 13, 2023

leerob added the linear: next Confirmed issue that is tracked by the Next.js team. label Jun 26, 2023

leerob mentioned this issue Jun 26, 2023

Script Tag not working as expected in APP DIR #50812

Closed

1 task

This was referenced Mar 18, 2024

docs: fix next/script example causing hydration errors #63401

Merged

feat(error-overlay): handle script under html hydration error #63403

Merged

huozhi closed this as completed Mar 18, 2024

github-actions bot added the locked label Apr 2, 2024

github-actions bot locked as resolved and limited conversation to collaborators Apr 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Any <Script /> with strategy="beforeInteractive" in RootLayout causes hydration errors #51242

Any <Script /> with strategy="beforeInteractive" in RootLayout causes hydration errors #51242

ethanfann commented Jun 13, 2023

tdsprogramming commented Jun 23, 2023 •

edited

Loading

zhangxinyong12 commented Jun 26, 2023

zhangxinyong12 commented Jun 26, 2023

donalffons commented Jul 8, 2023 •

edited

Loading

igordanchenko commented Jul 10, 2023

JonatasCopernico commented Jul 19, 2023

patricktansg commented Jul 20, 2023

desnor commented Aug 24, 2023 •

edited

Loading

buesing commented Aug 30, 2023

fuccsoc commented Sep 16, 2023

deverin commented Sep 20, 2023 •

edited

Loading

jaapaurelio commented Oct 3, 2023 •

edited

Loading

deverin commented Oct 3, 2023

NielsVdA commented Nov 9, 2023

Dynalon commented Nov 23, 2023

joshunger commented Dec 29, 2023 •

edited

Loading

plrthink commented Jan 19, 2024

nvsd commented Feb 1, 2024 •

edited

Loading

altano commented Feb 2, 2024

nvsd commented Feb 2, 2024 •

edited

Loading

altano commented Feb 3, 2024 •

edited

Loading

jSadoski commented Feb 6, 2024 •

edited

Loading

willstaff commented Feb 19, 2024

borzaka commented Feb 22, 2024 •

edited

Loading

salikn commented Mar 17, 2024

borzaka commented Mar 17, 2024

salikn commented Mar 17, 2024 •

edited

Loading

borzaka commented Mar 18, 2024

huozhi commented Mar 18, 2024 •

edited

Loading

github-actions bot commented Apr 2, 2024

Any <Script /> with strategy="beforeInteractive" in RootLayout causes hydration errors #51242

Any <Script /> with strategy="beforeInteractive" in RootLayout causes hydration errors #51242

Comments

ethanfann commented Jun 13, 2023

Verify canary release

Provide environment information

Which area(s) of Next.js are affected? (leave empty if unsure)

Link to the code that reproduces this issue or a replay of the bug

To Reproduce

Describe the Bug

Expected Behavior

Which browser are you using? (if relevant)

How are you deploying your application? (if relevant)

tdsprogramming commented Jun 23, 2023 • edited Loading

zhangxinyong12 commented Jun 26, 2023

zhangxinyong12 commented Jun 26, 2023

donalffons commented Jul 8, 2023 • edited Loading

igordanchenko commented Jul 10, 2023

JonatasCopernico commented Jul 19, 2023

patricktansg commented Jul 20, 2023

desnor commented Aug 24, 2023 • edited Loading

buesing commented Aug 30, 2023

fuccsoc commented Sep 16, 2023

deverin commented Sep 20, 2023 • edited Loading

jaapaurelio commented Oct 3, 2023 • edited Loading

deverin commented Oct 3, 2023

I have hydration issue when I use self-closing tag

NielsVdA commented Nov 9, 2023

Dynalon commented Nov 23, 2023

joshunger commented Dec 29, 2023 • edited Loading

plrthink commented Jan 19, 2024

nvsd commented Feb 1, 2024 • edited Loading

altano commented Feb 2, 2024

nvsd commented Feb 2, 2024 • edited Loading

altano commented Feb 3, 2024 • edited Loading

jSadoski commented Feb 6, 2024 • edited Loading

willstaff commented Feb 19, 2024

borzaka commented Feb 22, 2024 • edited Loading

salikn commented Mar 17, 2024

borzaka commented Mar 17, 2024

salikn commented Mar 17, 2024 • edited Loading

borzaka commented Mar 18, 2024

huozhi commented Mar 18, 2024 • edited Loading

github-actions bot commented Apr 2, 2024

tdsprogramming commented Jun 23, 2023 •

edited

Loading

donalffons commented Jul 8, 2023 •

edited

Loading

desnor commented Aug 24, 2023 •

edited

Loading

deverin commented Sep 20, 2023 •

edited

Loading

jaapaurelio commented Oct 3, 2023 •

edited

Loading

joshunger commented Dec 29, 2023 •

edited

Loading

nvsd commented Feb 1, 2024 •

edited

Loading

nvsd commented Feb 2, 2024 •

edited

Loading

altano commented Feb 3, 2024 •

edited

Loading

jSadoski commented Feb 6, 2024 •

edited

Loading

borzaka commented Feb 22, 2024 •

edited

Loading

salikn commented Mar 17, 2024 •

edited

Loading

huozhi commented Mar 18, 2024 •

edited

Loading