NextJSTemplates/startup-nextjs

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

ishandutta2007 opened this issue · 4 comments

ishandutta2007 commented

steps to reproduce:
npm i
npm run dev
visit https://localhost:300 and launch dev-console

Error:

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14726:9)
    at tryToClaimNextHydratableInstance (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14776:7)
    at updateHostComponent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:22996:5)
    at beginWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24826:14)
    at HTMLUnknownElement.callCallback (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:4246:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:4295:16)
    at invokeGuardedCallback (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:4359:31)
    at beginWork$1 (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:32202:7)
    at performUnitOfWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31077:12)
    at workLoopConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31063:5)
    at renderRootConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31021:7)
    at performConcurrentWorkOnRoot (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:29978:38)
    at workLoop (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3897)
    at flushWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3606)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:1787)
throwOnHydrationMismatch @ react-dom.development.js:14726
tryToClaimNextHydratableInstance @ react-dom.development.js:14776
updateHostComponent @ react-dom.development.js:23001
beginWork @ react-dom.development.js:24831
callCallback @ react-dom.development.js:4246
invokeGuardedCallbackDev @ react-dom.development.js:4295
invokeGuardedCallback @ react-dom.development.js:4359
beginWork$1 @ react-dom.development.js:32207
performUnitOfWork @ react-dom.development.js:31082
workLoopConcurrent @ react-dom.development.js:31068
renderRootConcurrent @ react-dom.development.js:31026
performConcurrentWorkOnRoot @ react-dom.development.js:29983
workLoop @ index.js:10
flushWork @ index.js:10
performWorkUntilDeadline @ index.js:10

System details:
node - 16.20.2
npm - 8.19.4
yarn -1.22.19
macOS - 10.13.6 (High Sierra)

AbhinayMe commented

Same issue. Did you find any solution or root cause?

ishandutta2007 commented

@AbhinayMe Not directly, but this maybe useful

Musharofchy commented

Couldn't reproduce this, please make sure dependencies are update and have proper env. to run Next13

  • 👎1
ishandutta2007 commented

@Musharofchy We strictly followed the documentation. Can you update the documentation with whatever environment thingy you are talking about.