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.

Sign up for GitHub

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

next/dynamic from external package causes hydration errors for combination of pages and app routers #69125

Open
adanperez opened this issue Aug 21, 2024 · 0 comments
Open

next/dynamic from external package causes hydration errors for combination of pages and app routers #69125

adanperez opened this issue Aug 21, 2024 · 0 comments
Labels
bug Issue was opened via the bug report template. Lazy Loading Related to Next.js Lazy Loading (e.g., `next/dynamic` or `React.lazy`). Pages Router Related to Pages Router. Runtime Related to Node.js or Edge Runtime with Next.js.

Comments

@adanperez
Copy link

Link to the code that reproduces this issue

https://github.com/adanperez/nextjs-dynamic-hydration-error

To Reproduce

  • pnpm run build
  • pnpm run start
  • Go to http://localhost:3000/ and refresh the page a couple times
    You will see the following Hydration errors in the console.
framework-5e252d5045bb7a0e.js:9 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
  at ly (framework-5e252d5045bb7a0e.js:9:46791)
  at framework-5e252d5045bb7a0e.js:9:99911
  at oD (framework-5e252d5045bb7a0e.js:9:106131)
  at oO (framework-5e252d5045bb7a0e.js:9:99079)
  at framework-5e252d5045bb7a0e.js:9:98886
  at oF (framework-5e252d5045bb7a0e.js:9:98893)
  at oS (framework-5e252d5045bb7a0e.js:9:93932)
  at x (framework-5e252d5045bb7a0e.js:33:1364)
  at MessagePort.T (framework-5e252d5045bb7a0e.js:33:1894)

framework-5e252d5045bb7a0e.js:9 Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
  at i (framework-5e252d5045bb7a0e.js:9:120721)
  at oO (framework-5e252d5045bb7a0e.js:9:99019)
  at framework-5e252d5045bb7a0e.js:9:98886
  at oF (framework-5e252d5045bb7a0e.js:9:98893)
  at ox (framework-5e252d5045bb7a0e.js:9:95645)
  at oS (framework-5e252d5045bb7a0e.js:9:94200)
  at x (framework-5e252d5045bb7a0e.js:33:1364)
  at MessagePort.T (framework-5e252d5045bb7a0e.js:33:1894)

Current vs. Expected behavior

Current

Currently we get hydration errors when using a next/dynamic component from an external package.

Expected

We do not expect to get hydration errors.

If you remove the app directory and rebuild and start the app, you will no longer see hydration errors. The combination of pages and app directories causes the hydration error.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:14:30 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: 9.4.0
Relevant Packages:
  next: 14.2.5 // Latest available version is detected (14.2.5).
  eslint-config-next: 14.2.5
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Lazy Loading, Pages Router, Runtime

Which stage(s) are affected? (Select all that apply)

next build (local), next start (local)

Additional context

No response
@adanperez adanperez added the bug Issue was opened via the bug report template. label Aug 21, 2024
@github-actions github-actions bot added Lazy Loading Related to Next.js Lazy Loading (e.g., `next/dynamic` or `React.lazy`). Pages Router Related to Pages Router. Runtime Related to Node.js or Edge Runtime with Next.js. labels Aug 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. Lazy Loading Related to Next.js Lazy Loading (e.g., `next/dynamic` or `React.lazy`). Pages Router Related to Pages Router. Runtime Related to Node.js or Edge Runtime with Next.js.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@adanperez