Fresh fork, lots of errors! #722

stephanlamoureux · 2023-09-29T14:49:47Z

stephanlamoureux
Sep 29, 2023

I'm fairly new to this tech stack, but with a completely fresh fork and build I get a lot of errors that I'm not sure how to handle. I installed through yarn, updated the metadata, ran a build, and then a ran dev server. Can someone point me in the right direction for my next steps?

These are the two runtime errors shown from React:

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

Warning: Did not expect server HTML to contain a <div> in <label>.

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

Component Stack
label
div
form
div
NewsletterForm
./node_modules/pliny/ui/NewsletterForm.js (33:3)
div

Unhandled Runtime Error
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

And these are the browser errors:

Warning: Did not expect server HTML to contain a <div> in <label>.
label
div
form
div
NewsletterForm@webpack-internal:///(app-pages-browser)/./node_modules/pliny/ui/NewsletterForm.js:32:22
div
InnerLayoutRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:242:18
RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9
RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:24
NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9
NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:62
LoadingBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:338:60
ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:53
InnerScrollAndFocusHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9
ScrollAndFocusHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:37
RenderFromTemplateContext@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44
OuterLayoutRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:173
main
KBarProvider@webpack-internal:///(app-pages-browser)/./node_modules/kbar/lib/KBarContextProvider.js:28:48
KBarSearchProvider@webpack-internal:///(app-pages-browser)/./node_modules/pliny/chunk-I3246JDF.js:24:26
div
section
f@webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.module.js:8:583
$@webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.module.js:8:348
ThemeProviders@webpack-internal:///(app-pages-browser)/./app/theme-providers.tsx:13:24
body
html
RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9
RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:24
NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9
NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:62
DevRootNotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:24
ReactDevOverlay@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9
HotReload@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:287:37
Router@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:157:93
ErrorBoundaryHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9
ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:53
AppRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:440:47
ServerRoot@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:123:24
RSCComponent
Root@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:139:24

Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>. [app-index.js:31:21](webpack://_N_E/node_modules/next/dist/client/app-index.js?d705)
    error app-index.js:31
    error hydration-error-info.js:45
    printWarning react-dom.development.js:94
    error react-dom.development.js:68
    errorHydratingContainer react-dom.development.js:34586
    recoverFromConcurrentError react-dom.development.js:23448
    performConcurrentWorkOnRoot react-dom.development.js:23397
    workLoop scheduler.development.js:261
    flushWork scheduler.development.js:230
    performWorkUntilDeadline scheduler.development.js:534

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

Warning: Did not expect server HTML to contain a <div> in <label>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error
    throwOnHydrationMismatch react-dom.development.js:6790
    popHydrationState react-dom.development.js:7124
    completeWork react-dom.development.js:18669
    completeUnitOfWork react-dom.development.js:24759
    performUnitOfWork react-dom.development.js:24564
    workLoopConcurrent react-dom.development.js:24539
    renderRootConcurrent react-dom.development.js:24495
    performConcurrentWorkOnRoot react-dom.development.js:23359
    workLoop scheduler.development.js:261
    flushWork scheduler.development.js:230
    performWorkUntilDeadline scheduler.development.js:534

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 (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:15478:57)
    at beginWork$1 (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:17357:14)
    at beginWork (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25702:14)
    at performUnitOfWork (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24553:12)
    at workLoopSync (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24269:5)
    at renderRootSync (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24224:7)
    at recoverFromConcurrentError (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23452:20)
    at performConcurrentWorkOnRoot (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23397:26)
    at workLoop (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:261:34)
    at flushWork (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:230:14)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:534:21)

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

Warning: Did not expect server HTML to contain a <div> in <label>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error
    throwOnHydrationMismatch react-dom.development.js:6790
    popHydrationState react-dom.development.js:7124
    completeWork react-dom.development.js:18669
    completeUnitOfWork react-dom.development.js:24759
    performUnitOfWork react-dom.development.js:24564
    workLoopConcurrent react-dom.development.js:24539
    renderRootConcurrent react-dom.development.js:24495
    performConcurrentWorkOnRoot react-dom.development.js:23359
    workLoop scheduler.development.js:261
    flushWork scheduler.development.js:230
    performWorkUntilDeadline scheduler.development.js:534

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.
    updateHostRoot react-dom.development.js:15478
    beginWork$1 react-dom.development.js:17357
    beginWork react-dom.development.js:25702
    performUnitOfWork react-dom.development.js:24553
    workLoopSync react-dom.development.js:24269
    renderRootSync react-dom.development.js:24224
    recoverFromConcurrentError react-dom.development.js:23452
    performConcurrentWorkOnRoot react-dom.development.js:23397
    workLoop scheduler.development.js:261
    flushWork scheduler.development.js:230
    performWorkUntilDeadline scheduler.development.js:534

Answered by timlrx

Oct 1, 2023

Are you using Windows / Mac?
What is the node version?
Did you yarn install with the yarn.lock file?

View full answer

timlrx · 2023-10-01T13:23:36Z

timlrx
Oct 1, 2023
Maintainer

Are you using Windows / Mac?
What is the node version?
Did you yarn install with the yarn.lock file?

1 reply

stephanlamoureux Oct 1, 2023
Author

It looks like it was the node version, thanks! I get the same errors when using WSL or Linux.

Locally WSL was using node 19.4 and Linux is on 20.5.1. I deployed the project to Vercel and those errors aren't there anymore so it looks like it was because Vercel is using 18.x. The only error I get now looks to be the same as on your deployment, which I believe is just from a Chrome extension:

script.js:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fresh fork, lots of errors! #722

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Fresh fork, lots of errors! #722

stephanlamoureux Sep 29, 2023

Replies: 1 comment · 1 reply

timlrx Oct 1, 2023 Maintainer

stephanlamoureux Oct 1, 2023 Author

stephanlamoureux
Sep 29, 2023

Replies: 1 comment 1 reply

timlrx
Oct 1, 2023
Maintainer

stephanlamoureux Oct 1, 2023
Author