Cannot import client components from a non-static dynamic import (This is probably a bug in the React Server Components bundler.)

[daneduijnkerke]

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: #202201071026-Ubuntu SMP Fri Jan 7 16:52:09 UTC 2022
    Binaries:
      Node: 16.20.1
      npm: 9.8.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.10
      eslint-config-next: 13.4.10
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

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

Dynamic imports (next/dynamic)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/daneduijnkerke/next-dynamic-import-bug-report

To Reproduce

1. Create a fresh NextJS installation: npx create-next-app@latest test
2. Create a Components folder in your app directory (/app/Components)
3. Create the following components to test the issue:
4. TestA.tsx, TestB.tsx and TestC.tsx (Codes will be shown below this)
5. Edit the page.tsx and remove all content from the Home() export.
6. Apply the codes below in the corresponding files.
7. Run the server with npm run dev (or next dev)

Page.tsx code:

import dynamic from "next/dynamic";

export default function Home() {
  // This works, we import a CLIENT component using a static path.
  const ContentA = dynamic(() => import('/src/app/Components/TestA'), {
    ssr: true,
    loading: () => <p>Loading...</p>,
  })

  // This works, we import a SERVER component using a non-static path.
  const baseTemplateB = 'TestB';
  const ContentB = dynamic(() => import('/src/app/Components/' + baseTemplateB), {
    ssr: true,
    loading: () => <p>Loading...</p>,
  })

  // This does NOT works, we import a CLIENT component using a non-static path.
  const baseTemplateC = 'TestC';
  const ContentC = dynamic(() => import('/src/app/Components/' + baseTemplateC), {
    ssr: true,
    loading: () => <p>Loading...</p>,
  })

  return (
      <main className="test">
        <ContentA />
        <ContentB />
        <ContentC />
      </main>
  )
}

Components/TestA.tsx (Note this is a CLIENT component)

'use client'

export default async function TestA() {
    return (
        <div>TestA</div>
    )
}

Components/TestB.tsx (Note this is a SERVER component)

export default async function TestB() {
    return (
        <div>TestB</div>
    )
}

Components/TestC.tsx (Note this is a CLIENT component)

'use client'

export default async function TestC() {
    return (
        <div>TestC</div>
    )
}

Describe the Bug

When Dynamically importing a client component, using a non-static path, the following error gets thrown:

Error: Could not find the module "/var/www/test/src/app/Components/TestC.tsx#" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

This also happens when you Dynamically import a SERVER component, which (eventually) renders a CLIENT component.

Expected Behavior

To be able to dynamically import CLIENT components, just as SERVER components.

Which browser are you using? (if relevant)

Firefox and Chrome

How are you deploying your application? (if relevant)

No response

[shuding]

Cloud you try again with the latest canary? Thanks! I think #52795 should fix this as well.

[artemis-prime]

Can someone please update the status of this and close it if it's no longer an issue??

[thaonx]

I am facing the same issue. dynamic import client component from a server component throw the Error: Could not find the module

[elie222]

Adding 'use client' to the top of the file worked for me to fix it.