Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103
Binaries:
  Node: 14.18.0
  npm: 6.14.15
  Yarn: 1.22.17
  pnpm: 7.14.1
Relevant packages:
  next: 13.0.5-canary.3
  eslint-config-next: 13.0.5-canary.3
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Firefox 107.0

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

Dynamically importing with next/dynamic a Client Component that uses a use/client directive will cause an Error: object is not a function error in development. The production build runs fine though.

Also noticed that adding ssr: false won't prevent the component from getting prerendered when running next build. Adding suspense: true or suspense: false won't make a difference either.

Expected Behavior

We should be able to dynamically import a component that makes heavy use of JavaScript in the client from a Server Component and use a custom Suspense-based fallback.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/brvnonascimento/use-client-dynamic-bug

To Reproduce

1. Run yarn create next-app --experimental-app
2. Create a Client Component by adding the 'use client' directive
3. Use next/dynamic to import the given component
4. See Error: object is not a function in development

import dynamic from "next/dynamic";
import { Suspense } from "react";

const ClientTest = dynamic(() => import("./ClientTest"));

export default function Home() {
  return (
    <div>
      <Suspense fallback={<h1>Loading...</h1>}>
        <ClientTest />
      </Suspense>
    </div>
  );
}