next.js
next.js copied to clipboard
vercel
<Script/> with beforeInteractive failing
Verify canary release
- [X] 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 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
Binaries:
Node: 16.13.1
npm: 8.1.2
Yarn: 1.22.17
pnpm: 7.14.0
Relevant packages:
next: 13.0.1-canary.0
eslint-config-next: 13.0.0
react: 18.2.0
react-dom: 18.2.0
What browser are you using? (if relevant)
All browsers
How are you deploying your application? (if relevant)
next dev
Describe the Bug
I'm new to Next, although, this appears to be a bug (apologies if I'm missing something).
I'm having issues adding strategy="beforeInteractive" to <Script/>.
When adding this to the layout.tsx of the latest create-next-app (13.0.1-canary.0):
<head>
...
<Script
id="logHi"
strategy="beforeInteractive"
dangerouslySetInnerHTML={{ __html: `console.log('Hi')` }}
/>
</head>
The following errors are thrown in the client:
Warning: Expected server HTML to contain a matching <script> in <head>.
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
Full trace
react_devtools_backend.js:4026 Warning: Expected server HTML to contain a matching <script> in <head>.
at script
at Script (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/script.js:129:13)
at head
at html
at ReactDevOverlay (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:53:9)
at HotReload (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:19:11)
at Router (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/app-router.js:73:11)
at ErrorBoundaryHandler (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/error-boundary.js:28:9)
at ErrorBoundary (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/error-boundary.js:40:11)
at AppRouter
at ServerRoot (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/app-index.js:114:11)
at RSCComponent
at Root (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/app-index.js:130:11)
overrideMethod @ react_devtools_backend.js:4026
printWarning @ react-dom.development.js?f14d:94
error @ react-dom.development.js?f14d:68
warnForInsertedHydratedElement @ react-dom.development.js?f14d:10647
didNotFindHydratableInstance @ react-dom.development.js?f14d:13468
warnNonhydratedInstance @ react-dom.development.js?f14d:14518
tryToClaimNextHydratableInstance @ react-dom.development.js?f14d:14692
updateHostComponent @ react-dom.development.js?f14d:22712
beginWork @ react-dom.development.js?f14d:24538
beginWork$1 @ react-dom.development.js?f14d:31617
performUnitOfWork @ react-dom.development.js?f14d:30549
workLoopConcurrent @ react-dom.development.js?f14d:30535
renderRootConcurrent @ react-dom.development.js?f14d:30474
performConcurrentWorkOnRoot @ react-dom.development.js?f14d:29662
workLoop @ index.js?a586:10
flushWork @ index.js?a586:10
performWorkUntilDeadline @ index.js?a586:10
react-dom.development.js?f14d:14643 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
at throwOnHydrationMismatch (react-dom.development.js?f14d:14643:1)
at tryToClaimNextHydratableInstance (react-dom.development.js?f14d:14693:1)
at updateHostComponent (react-dom.development.js?f14d:22712:1)
at beginWork (react-dom.development.js?f14d:24538:1)
at HTMLUnknownElement.callCallback (react-dom.development.js?f14d:4248:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js?f14d:4297:1)
at invokeGuardedCallback (react-dom.development.js?f14d:4361:1)
at beginWork$1 (react-dom.development.js?f14d:31642:1)
at performUnitOfWork (react-dom.development.js?f14d:30549:1)
at workLoopConcurrent (react-dom.development.js?f14d:30535:1)
throwOnHydrationMismatch @ react-dom.development.js?f14d:14643
tryToClaimNextHydratableInstance @ react-dom.development.js?f14d:14693
updateHostComponent @ react-dom.development.js?f14d:22712
beginWork @ react-dom.development.js?f14d:24538
callCallback @ react-dom.development.js?f14d:4248
invokeGuardedCallbackDev @ react-dom.development.js?f14d:4297
invokeGuardedCallback @ react-dom.development.js?f14d:4361
beginWork$1 @ react-dom.development.js?f14d:31642
performUnitOfWork @ react-dom.development.js?f14d:30549
workLoopConcurrent @ react-dom.development.js?f14d:30535
renderRootConcurrent @ react-dom.development.js?f14d:30474
performConcurrentWorkOnRoot @ react-dom.development.js?f14d:29662
workLoop @ index.js?a586:10
flushWork @ index.js?a586:10
performWorkUntilDeadline @ index.js?a586:10
react_devtools_backend.js:4026 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
overrideMethod @ react_devtools_backend.js:4026
printWarning @ react-dom.development.js?f14d:94
error @ react-dom.development.js?f14d:68
errorHydratingContainer @ react-dom.development.js?f14d:13483
recoverFromConcurrentError @ react-dom.development.js?f14d:29772
performConcurrentWorkOnRoot @ react-dom.development.js?f14d:29675
workLoop @ index.js?a586:10
flushWork @ index.js?a586:10
performWorkUntilDeadline @ index.js?a586:10
react-dom.development.js?f14d:14643 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
at throwOnHydrationMismatch (react-dom.development.js?f14d:14643:1)
at tryToClaimNextHydratableInstance (react-dom.development.js?f14d:14693:1)
at updateHostComponent (react-dom.development.js?f14d:22712:1)
at beginWork (react-dom.development.js?f14d:24538:1)
at beginWork$1 (react-dom.development.js?f14d:31617:1)
at performUnitOfWork (react-dom.development.js?f14d:30549:1)
at workLoopConcurrent (react-dom.development.js?f14d:30535:1)
at renderRootConcurrent (react-dom.development.js?f14d:30474:1)
at performConcurrentWorkOnRoot (react-dom.development.js?f14d:29662:1)
at workLoop (index.js?a586:10:3922)
throwOnHydrationMismatch @ react-dom.development.js?f14d:14643
tryToClaimNextHydratableInstance @ react-dom.development.js?f14d:14693
updateHostComponent @ react-dom.development.js?f14d:22712
beginWork @ react-dom.development.js?f14d:24538
beginWork$1 @ react-dom.development.js?f14d:31617
performUnitOfWork @ react-dom.development.js?f14d:30549
workLoopConcurrent @ react-dom.development.js?f14d:30535
renderRootConcurrent @ react-dom.development.js?f14d:30474
performConcurrentWorkOnRoot @ react-dom.development.js?f14d:29662
workLoop @ index.js?a586:10
flushWork @ index.js?a586:10
performWorkUntilDeadline @ index.js?a586:10
react-dom.development.js?f14d:22659 Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
at updateHostRoot (react-dom.development.js?f14d:22659:1)
at beginWork (react-dom.development.js?f14d:24521:1)
at beginWork$1 (react-dom.development.js?f14d:31617:1)
at performUnitOfWork (react-dom.development.js?f14d:30549:1)
at workLoopSync (react-dom.development.js?f14d:30434:1)
at renderRootSync (react-dom.development.js?f14d:30387:1)
at recoverFromConcurrentError (react-dom.development.js?f14d:29776:1)
at performConcurrentWorkOnRoot (react-dom.development.js?f14d:29675:1)
at workLoop (index.js?a586:10:3922)
at flushWork (index.js?a586:10:3630)
The issue only occurs when strategy is set to beforeInteractive.
It occurs for both inline scripts and third party scripts (added via src).
Expected Behavior
Should work without throwing errors
Link to reproduction
https://github.com/ryanpwaldon/next13-repro
To Reproduce
Run next dev, check browser console
Not sure if this is in developing.
I tried Head component in layout file, it cannot work as well.
But if you move your <Script> to page.tsx, everything be ok.
I will try to have a look about it.
Seeing this in 13.4.4 with regular
For me, with the app dir for me, <Script> doesn't work at all.
Seeing this in 13.4.4 with regular
For me, with the app dir for me, <Script> doesn't work at all.
i'm also.
I found that under the body box of the root layout, dropping the script with beforeInteractive can avoid the error.
Just tried it...didn't work for me.
You meant right inside the body tag right? Like this:
****I got a warning saying that beforeInteractive cannot be used outside _document.js using the pages router :(
for me, it works in app/layout.tsx if it is like
<html lang="en"> <body> {children} <Script strategy="beforeInteractive" ... /> </body> </html>
instead of
<html lang="en"> <body> {children} </body> <Script strategy="beforeInteractive" ... /> </html>
for me, it works in app/layout.tsx if it is like
<html lang="en"> <body> {children} <Script strategy="beforeInteractive" ... /> </body> </html>instead of
<html lang="en"> <body> {children} </body> <Script strategy="beforeInteractive" ... /> </html>
yes, this can fix the error
