App router dynamic imports not working with parent server component

[tombryden]

Link to the code that reproduces this issue

https://github.com/tombryden/dynamic-import-bug

To Reproduce

1. npm run build - Observe / first load js = 119 kB
2. Uncomment "use client" in page.tsx
3. npm run build - Observe / first load js = 85.7 kB

Current vs. Expected behavior

Dynamic importing of a component only works when the parent component is a client component. Perhaps some additional documentation (e.g. suggesting wrapping with a client component to import dynamically) is needed to clear up confusion if this is expected behaviour. I believe you should be ok to close #49454 as this looks to be caused by this.

Verify canary release

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

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 18.17.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.2-canary.25
  eslint-config-next: 14.0.2-canary.25
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

App Router, Dynamic imports (next/dynamic)

Additional context

No response

[AhmedBaset]

Jiachi explained that very well at #49454 (comment)

I believe this should be documented officially in the docs