nextjs - ✅(Solved) Fix [Turbopack] [Pages] Hydration error (or double render) when using dynamic imports in _app.tsx [1 pull requests, 6 comments, 5 participants]

rtrembecky · 2025-10-26T13:40:41Z

[nextjs] PR 85803: Turbopack: fix next/dynamic in app - Repository: vercel/next.js - Author: mischnic - State: open | merged: False - Link: https://github.com/… # PR #85803: Turbopack: fix next/dynamic in _app - Repository: vercel/next.js - Author: mischnic - State: open | merged: False - Link: https://github.com/vercel/next.js/pull/85803 ## Description (problem / solution / changelog) Closes https://github.com/vercel/next.js/issues/85370 Closes https://github.com/vercel/next.js/issues/77712 This is getting hackier and hackier. The problem is that the `_app` and the individual page routes are entirely separate (and not chunked togeter like the layout and page in app router). So the page endpoint would like to get the next/dynamic chunks as generated from the _app route, so we somehow have to get hold of the _app entry module and the _app module graph. Which is getting hackier and hackier. Right now, it does discover the next/dynamic usage, but generates the wrong chunks (so the chunks to preload from the manifest, and the chunks that are loaded at runtime aren't the same. So the preloading isn't effective at all): ## Changed files - `bench/basic-app/app/api/app/route.js` (removed, +0/-5) - `bench/basic-app/app/layout.js` (removed, +0/-12) - `bench/basic-app/app/page.js` (removed, +0/-7) - `bench/basic-app/components/Dynamic.tsx` (added, +5/-0) - `bench/basic-app/next-env.d.ts` (added, +6/-0) - `bench/basic-app/next.config.js` (removed, +0/-5) - `bench/basic-app/next.config.ts` (added, +9/-0) - `bench/basic-app/pages/_app.tsx` (added, +14/-0) - `bench/basic-app/pages/api/page-api.js` (removed, +0/-3) - `bench/basic-app/pages/index.tsx` (added, +4/-0) - `bench/basic-app/pages/pages/index.js` (removed, +0/-7) - `bench/basic-app/tsconfig.json` (added, +19/-0) - `bench/basic-app/works.tsx` (added, +8/-0) - `crates/next-api/src/dynamic_imports.rs` (modified, +19/-2) - `crates/next-api/src/module_graph.rs` (modified, +21/-1) - `crates/next-api/src/pages.rs` (modified, +117/-46) - `crates/next-core/src/next_pages/page_entry.rs` (modified, +5/-5) ## Fixed - Fixed by PR: Turbopack: fix next/dynamic in _app (https://github.com/vercel/next.js/pull/85803) ### Link to the code that reproduces this issue https://github.com/rtrembecky/next-turbopack-hydration-repro ### To Reproduce 1. Install the deps - `pnpm i` 2. Start the app - `pnpm dev` 3. Navigate to http://localhost:3000 ### Current vs. Expected behavior Current behavior: Expected: No errors. ### Provide environment information ```bash Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:29 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T6000 Available memory (MB): 32768 Available CPU cores: 10 Binaries: Node: 24.2.0 npm: 11.4.0 Yarn: 1.22.19 pnpm: 9.15.9 Relevant Packages: next: 16.0.1-canary.2 // Latest available version is detected (16.0.1-canary.2). eslint-config-next: N/A react: 19.2.0 react-dom: 19.2.0 typescript: 5.9.3 Next.js Config: output: N/A ``` ### Which area(s) are affected? (Select all that apply) Pages Router, Module Resolution, Turbopack ### Which stage(s) are affected? (Select all that apply) next dev (local), next build (local), Other (Deployed) ### Additional context Pinpointed broken versions: - canary: >= `15.1.1-canary.14`, up to `16.0.1-canary.2` (latest at the time of writing) - stable: >= `15.2.0` Working versions: - `15.1.1-canary.13` - `15.1.6` Background: - `_app.tsx` imports a component via `next/dynamic` - this causes a hydration issue - when the same component is imported from the page level as well, it works - http://localhost:3000/works page (in repro repo) works - when the ` ` wrapper in `_app.tsx` is removed or replaced by a `<>` fragment, the dynamic element is rendered TWICE instead - so this issue looks related: https://github.com/vercel/next.js/issues/77712 - and also this one where @gurkerl83 reported it's fixed in `15.1.1-canary.14`, though it apparently broke something: https://github.com/vercel/next.js/issues/70795#issuecomment-2555971126 - cc @timneutkens as you were involved on that one, but I understand it's been quite a while Real world scenario: - On www.groupon.com, we use `const Layout = Component.getLayout || DefaultLayout;` in `_app.tsx`, where `DefaultLayout` is imported dynamically - it's not needed for a user that accesses only pages with custom layouts (defined on the page level via `Page.getLayout`). - -> We are getting hydration errors in dev when using Turbopack, and also production React minified errors (even though we haven't migrated build to Turbopack yet, so it might be a different issue).

nextjs2025-10-26 13:40:41

ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

GitHub issue URL

Helpful · Quick feedback

GitHub stats

vercel/next.js#85370•Fetched 2026-04-08 02:16:10

View on GitHub

Comments

Participants

Timeline

Reactions

Author

Participants

Timeline (top)

subscribed ×12commented ×6mentioned ×6labeled ×4

Fix Action

Fixed

Fixed by PR: Turbopack: fix next/dynamic in _app (https://github.com/vercel/next.js/pull/85803)

PR fix notes

PR #85803: Turbopack: fix next/dynamic in _app

Repository: vercel/next.js
Author: mischnic
State: open | merged: False
Link: https://github.com/vercel/next.js/pull/85803

Description (problem / solution / changelog)

Closes https://github.com/vercel/next.js/issues/85370 Closes https://github.com/vercel/next.js/issues/77712

This is getting hackier and hackier.

The problem is that the _app and the individual page routes are entirely separate (and not chunked togeter like the layout and page in app router).

So the page endpoint would like to get the next/dynamic chunks as generated from the _app route, so we somehow have to get hold of the _app entry module and the _app module graph. Which is getting hackier and hackier.

Right now, it does discover the next/dynamic usage, but generates the wrong chunks (so the chunks to preload from the manifest, and the chunks that are loaded at runtime aren't the same. So the preloading isn't effective at all): <img width="1679" height="308" alt="Bildschirmfoto 2025-11-05 um 11 43 02" src="https://github.com/user-attachments/assets/3e15d320-0cee-4eff-b233-1a532d07cee1" />

Changed files

bench/basic-app/app/api/app/route.js (removed, +0/-5)
bench/basic-app/app/layout.js (removed, +0/-12)
bench/basic-app/app/page.js (removed, +0/-7)
bench/basic-app/components/Dynamic.tsx (added, +5/-0)
bench/basic-app/next-env.d.ts (added, +6/-0)
bench/basic-app/next.config.js (removed, +0/-5)
bench/basic-app/next.config.ts (added, +9/-0)
bench/basic-app/pages/_app.tsx (added, +14/-0)
bench/basic-app/pages/api/page-api.js (removed, +0/-3)
bench/basic-app/pages/index.tsx (added, +4/-0)
bench/basic-app/pages/pages/index.js (removed, +0/-7)
bench/basic-app/tsconfig.json (added, +19/-0)
bench/basic-app/works.tsx (added, +8/-0)
crates/next-api/src/dynamic_imports.rs (modified, +19/-2)
crates/next-api/src/module_graph.rs (modified, +21/-1)
crates/next-api/src/pages.rs (modified, +117/-46)
crates/next-core/src/next_pages/page_entry.rs (modified, +5/-5)

Code Example

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:29 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 24.2.0
  npm: 11.4.0
  Yarn: 1.22.19
  pnpm: 9.15.9
Relevant Packages:
  next: 16.0.1-canary.2 // Latest available version is detected (16.0.1-canary.2).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/rtrembecky/next-turbopack-hydration-repro

To Reproduce

Install the deps - pnpm i
Start the app - pnpm dev
Navigate to http://localhost:3000

Current vs. Expected behavior

Current behavior:

Expected: No errors.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:29 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 24.2.0
  npm: 11.4.0
  Yarn: 1.22.19
  pnpm: 9.15.9
Relevant Packages:
  next: 16.0.1-canary.2 // Latest available version is detected (16.0.1-canary.2).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

Pages Router, Module Resolution, Turbopack

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

next dev (local), next build (local), Other (Deployed)

Additional context

Pinpointed broken versions:

canary: >= 15.1.1-canary.14, up to 16.0.1-canary.2 (latest at the time of writing)
stable: >= 15.2.0

Working versions:

15.1.1-canary.13
15.1.6

Background:

_app.tsx imports a component via next/dynamic - this causes a hydration issue
when the same component is imported from the page level as well, it works - http://localhost:3000/works page (in repro repo) works
when the <main> wrapper in _app.tsx is removed or replaced by a <> fragment, the dynamic element is rendered TWICE instead
- so this issue looks related: https://github.com/vercel/next.js/issues/77712
- and also this one where @gurkerl83 reported it's fixed in 15.1.1-canary.14, though it apparently broke something: https://github.com/vercel/next.js/issues/70795#issuecomment-2555971126
  - cc @timneutkens as you were involved on that one, but I understand it's been quite a while

Real world scenario:

On www.groupon.com, we use const Layout = Component.getLayout || DefaultLayout; in _app.tsx, where DefaultLayout is imported dynamically - it's not needed for a user that accesses only pages with custom layouts (defined on the page level via Page.getLayout).
- -> We are getting hydration errors in dev when using Turbopack, and also production React minified errors (even though we haven't migrated build to Turbopack yet, so it might be a different issue).

extent analysis

TL;DR

The issue can be potentially fixed by downgrading Next.js to a version prior to 15.1.1-canary.14 or by modifying the _app.tsx file to avoid the hydration issue.

Guidance

Verify that the issue is indeed related to the dynamic import in _app.tsx by checking if removing or replacing the <main> wrapper changes the behavior.
Investigate the relationship between the hydration issue and the reported issues in Next.js, specifically https://github.com/vercel/next.js/issues/77712 and https://github.com/vercel/next.js/issues/70795.
Consider using a different approach for importing the DefaultLayout component, such as importing it statically or using a different layout mechanism.
Test the application with different versions of Next.js to identify the exact version that introduced the issue.

Example

No code snippet is provided as the issue is more related to the configuration and versioning of Next.js rather than a specific code snippet.

Notes

The issue seems to be related to the interaction between Next.js, Turbopack, and React. The fact that the issue is present in both development and production environments suggests that it's a deeper issue that requires a more thorough investigation.

Recommendation

Apply a workaround by downgrading Next.js to a version prior to 15.1.1-canary.14, such as 15.1.1-canary.13, until a fix is available in a newer version. This is because the issue is likely related to a change introduced in 15.1.1-canary.14 that broke the hydration mechanism.

Vote matrix · Quick signals

Works

Did the solution work? Tap to confirm.

Easy Fix

Was it a quick fix?

Time Saver

Did it save you time?

Blocking

Was it severely blocking?

Common Issue

Are others likely hitting this too?

Flaky / Intermittent

Is it intermittent?

Verified / Reproducible

Can you reproduce it reliably?

#prompt issue #agent setup #task chaining #parallel task #integration issue

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Data

Security

Network

Code

UI/UX

Text

System

Multimedia

Protocol

API

Engineering

nextjs - ✅(Solved) Fix [Turbopack] [Pages] Hydration error (or double render) when using dynamic imports in _app.tsx [1 pull requests, 6 comments, 5 participants]

Recommended Tools

GitHub issue graph ai analysis

Fix Action

Fixed

PR fix notes

PR #85803: Turbopack: fix next/dynamic in _app

Description (problem / solution / changelog)

Changed files

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

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

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

Additional context

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

TRENDING

nextjs - ✅(Solved) Fix [Turbopack] [Pages] Hydration error (or double render) when using dynamic imports in _app.tsx [1 pull requests, 6 comments, 5 participants]

Recommended Tools

GitHub issue graph ai analysis

Fix Action

Fixed

PR fix notes

PR #85803: Turbopack: fix next/dynamic in _app

Description (problem / solution / changelog)

Changed files

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

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

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

Additional context

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

RELATED_DISCOVERY

TRENDING