Repository: next.js
Issue: Cannot import client components from a non-static dynamic import (This is probably a bug in the React Server Components bundler.)
Labels: bug,Lazy Loading

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
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_