next/dynamic not hydrating content and rendering twice on pages dir

Why this is a good first issue

Issue involves complex interaction between Turbopack and next/dynamic with unclear root cause.

AI Summary

The issue involves next/dynamic not hydrating content correctly and rendering twice when using Turbopack in the Pages Router. The problem appears to be specific to Turbopack's handling of dynamic imports, but the root cause is unclear. This requires deep knowledge of both Turbopack and Next.js's hydration mechanisms.

Issue Description

Link to the code that reproduces this issue

https://github.com/kristiancoulsonplt/next-dynamic-bug

To Reproduce

Clone the repo
npm i
run npm run dev:turbo and you should see it on the index page

Manual Rep to recreate the issue

Create a new next app using pages router
Create a component that is imported into _app using dynamic import
Run next dev server using turbo pack

Current vs. Expected behavior

Without using turbopack it only renders once and hydrates properly

Using turbopack it renders once with SSR, then renders a second time - worth noting the first render is not interactive at all

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Fri Nov 15 15:13:15 PST 2024; root:xnu-10063.141.1.702.7~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 8
Binaries:
  Node: 20.19.0
  npm: 10.8.2
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 15.2.4 // Latest available version is detected (15.2.4).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.2
Next.js Config:
  output: N/A

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

Lazy Loading

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

next dev (local)

Additional context

The closest issue I can find is this comment but the thread was auto closed due to inactivity https://github.com/vercel/next.js/issues/70795#issuecomment-2557216910

GitHub Labels

Lazy LoadingTurbopack