Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hydration failed because the initial UI does not match what was rendered on the server.Hydration failed because the initial UI does not match what was rendered on the server.Hydration failed because the initial UI does not match what was rendered on the server. #44945

Open
1 task done
amm834 opened this issue Jan 17, 2023 · 0 comments
Open
1 task done

Hydration failed because the initial UI does not match what was rendered on the server.Hydration failed because the initial UI does not match what was rendered on the server.Hydration failed because the initial UI does not match what was rendered on the server. #44945

amm834 opened this issue Jan 17, 2023 · 0 comments
Labels
template: bug A user has filled out the bug report template. Issue needs triaging

Comments

@amm834
Copy link

amm834 commented Jan 17, 2023

Verify canary release

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

Provide environment information


    Operating System:
      Platform: linux
      Arch: x64
      Version: #30-Ubuntu SMP PREEMPT_DYNAMIC Wed Jan 4 12:14:09 UTC 2023
    Binaries:
      Node: 18.12.1
      npm: 8.19.2
      Yarn: N/A
      pnpm: 7.24.3
    Relevant packages:
      next: 13.1.2
      eslint-config-next: 13.1.2
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.1.2", newest: "13.1.3-canary.1".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

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

No response

Link to the code that reproduces this issue

https://github.com/amm834/no-bs-ts/tree/main/ts-next

To Reproduce

pnpm dev

See error

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

Call Stack
React
throwOnHydrationMismatch
node_modules/.pnpm/next@13.1.2_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (14726:0)
tryToClaimNextHydratableInstance
node_modules/.pnpm/next@13.1.2_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (14776:0)
updateHostComponent
node_modules/.pnpm/next@13.1.2_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23001:0)
beginWork
node_modules/.pnpm/next@13.1.2_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24831:0)
beginWork$1
node_modules/.pnpm/next@13.1.2_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (32185:0)
performUnitOfWork
node_modules/.pnpm/next@13.1.2_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (31082:0)
workLoopSync
node_modules/.pnpm/next@13.1.2_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (30891:0)
renderRootSync
node_modules/.pnpm/next@13.1.2_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (30856:0)
performSyncWorkOnRoot
node_modules/.pnpm/next@13.1.2_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (30368:0)
flushSyncCallbacks
node_modules/.pnpm/next@13.1.2_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (14254:0)
eval
node_modules/.pnpm/next@13.1.2_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (29896:0)

Describe the Bug

Hydration failed when I am using with app/ directory. It is not even resolved. However, It is occurring in new next app with app/ dir.

Expected Behavior

partial hydration should match

Which browser are you using? (if relevant)

Chrome Version 108.0.5359.124 (Official Build) (64-bit)

How are you deploying your application? (if relevant)

default commands
@amm834 amm834 added the template: bug A user has filled out the bug report template. Issue needs triaging label Jan 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
template: bug A user has filled out the bug report template. Issue needs triaging
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@amm834