next v14.2.8 with next/dynamic component breaks app

[ovidiuwin]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/j6yc57

To Reproduce

1. Open the codesandbox link
2. Go to page.tsx file and check the next/dynamic import
3. Go to the actual component, you will see that it's marked as 'use client' and it uses a simple useState hook
4. Check the error on the screen
5. Remove next/dynamic from page.tsx and import it as regular component, error is gone

Current vs. Expected behavior

I expected that next/dynamic component would work since prior to this nextjs version it did

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.2.8 // Latest available version is detected (14.2.8).
  eslint-config-next: 14.2.1
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A

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

create-next-app, Developer Experience, Module Resolution, Runtime

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

next dev (local), next start (local)

Additional context

No response

[AlexHashgraph]

Encountered this too. Looking for a resolution

[lubieowoce]

Hi! Sorry about that -- definitely shouldn't break things like this in a patch release! I'm looking into what's causing this. AFAICT, it's specific to a server component (e.g. page.js) wrapping a client module in dynamic(), but i'm not 100% sure yet.

In the meantime, as a workaround, try the following:

If your module has a default export, there's no need to do import("../components/Test").then((module) => module.default), it's enough to just do import("../components/Test"):

// default export - no need to `.then` at all
const TestDynamicComp = dynamic(() => import("../components/Test"), {
  ssr: false,
});

(Technically, import("../components/Test").then((module) => ({ default: module.default }) works too, it's just redundant)

You only need to do something with the module if you're trying to use a named export:

// named export - need to wrap in `{ default: }`
const TestDynamicComp = dynamic(
  () =>
    import("../components/Test").then((module) => {
      return { default: module.TestComp };
    }),
  {
    ssr: false,
  }
);

I've tested these in your repro and both forms work for me on 14.2.8.

[huozhi]

Technically it's not really doing ssr: false dynamic import of client components in server components. We're thinking to disable the usage for it as it's not really doing the code splitting like it's in pages router or app router client components (only SSR).

If you're looking better code splitting with next/dynamic, you can move it into a client component and call next/dynamic there. Then import that client component into the server component page or layout.

In your case, you might want to move the dynamic component into another client component file.

// client-dynamic-compo.js
'use client' 
export const TestDynamicComp = dynamic(
  () => import("../components/Test").then((module) => module.default),
  {
    ssr: false,
  }
);

Then use the dynamic-comp.js into the server component.

// page.js

import { TestDynamicComp } from './client-dynamic-comp'

<TestDynamicComp />

This will have less impact for the future updates and really using the code splitting ability of next/dynamic

[a88zach]

This solution worked for me: #47316

[borisghidaglia]

Hey @huozhi 👋

Technically it's not really doing ssr: false dynamic import of client components in server components. We're thinking to disable the usage for it as it's not really doing the code splitting like it's in pages router or app router client components (only SSR).

I'm not sure I understand this correctly.
Do you mean that doing the following does not in fact disable SSR if Component is a client component and that we are doing this from a server component?

const DynamicComponent = dynamic(() => import('./Component'), {
  ssr: false,
});

I had some issues with dynamic.
I couldn't build my project because of ReferenceError: window is not defined .

When running the project in dev, I had a 500 with the same error, but the page rendered fine.
I think its because in dev Next.js falls back to "client rendering only" just like when there is a hydration mismatch, but I'm not sure.

When I implemented what your message suggests with TestDynamicComp, the build worked and dev wasn't throwing the error anymore.

[Stewart86]

Because I have used dynamic imports to reduce bundle size to the entire project previously, this 'bug' means I have to almost entirely overhaul my entire project server / client structure. Can there be a clear guideline on how it should be done moving forward? Not looking at quick fixes or workaround here, as I would have to edit a lot of files.

[huozhi]

@borisghidaglia when you use next/dynamic with ssr: false option to only load a component in browser, you need to put the next/dynamic call in a client components, otherwise it will work do SSR. We're considering in the next major version, disable ssr: false for server components to help users to render non-SSR component correctly. It's a different case from this issue but sth we'd love to improve on the DX.

[huozhi]

Regarding to this issue, I had a fix #69749 to change the behavior back as and release a patch soon. Since the pattern of "using next/dynamic to import a client component in a server component" is not recommended, we'll recommend you to migrate later. The behavior will be changed in v15 but not on v14.2.x.

[huozhi]

This is fixed in patch release 14.2.9, please upgrade Next.js to that version, thanks 🙏

[github-actions]

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