[appDir] Dynamically importing a Client Component using the 'use client' directive from a Server Component causes "Error: object is not a function"

[brvnonascimento]

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>
  );
}

Screen.Recording.2022-11-20.at.04.16.21.mov

[brvnonascimento]

Also the link of deployed build in Vercel proving that it works in production and also that is still prerendering even though ssr: false is being set.

https://use-client-dynamic-bug.vercel.app/

[brvnonascimento]

After reading a bit more about this section of the React Server Components RFC I could check that this is possibly by design and that dynamic is not needed as bundle splitting is simplified.

I still think we could improve the error messaging here, will open a PR for this ASAP.

[balazsorban44]

Correct, you won't need next/dynamic in this case, as splitting is going to happen automatically.

Although the error message is a bit unclear and we could improve it.

See also: https://beta.nextjs.org/docs/routing/loading-ui#manually-defining-suspense-boundaries

[huozhi]

Hi @brvnonascimento , when you import a client component in server component, it will become a module reference which is the "object" that marked in the error. But as @balazsorban44 mentioned above, you don't actually need to do in that way you can just move the part you don't want to have in client bundle to server components then leave the rest to client components, and directly importing them will be fine.

Will improve the error for it

[huozhi]

After discussion, this case should be able to support, the effect is client will be split into different chunk but still be loadable throught this way. I'm addressing the support for this in #42589

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.