next.js: Dynamic imports in npm packages leads to hydration error ( broken >= 13.2, works <= 13.1.0)

Link to the code that reproduces this issue

https://github.com/valleywood/reproduction-app-dynamic-component-hydration-error-pages

To Reproduce

Start the application in development (next dev)
Go to localhost:3000 Leads to the following hydration error:

Code for the imported package can be found here: https://github.com/valleywood/reproduction-app-dynamic-component-hydration-error-package

Current vs. Expected behavior

It should be possible to import a component from another npm repo that contains a dynamically loaded component. There should be no hydration errors when doing this (and there should be no need of adding { ssr: false } on those components

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.16.0
      npm: 8.3.1
      Yarn: 1.22.10
      pnpm: N/A
    Relevant Packages:
      next: 13.5.2-canary.2
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      output: N/A

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

Dynamic imports (next/dynamic)

Additional context

If I import the same component non-dynamically it works fine (but that would of course affect the bundle size)

About this issue

Original URL
State: closed
Created 9 months ago
Reactions: 9
Comments: 21 (9 by maintainers)

Most upvoted comments

@huozhi Updated the reproduction package to be available from npm (moving it from github) https://www.npmjs.com/package/reproduction-app-dynamic-component-hydration-error-package

Also updated the reproduction repo that uses the reproduction package to now also point to the npmjs version of the package.

Also granted you access to the package repo.

Note that the key takeaway is this:

From https://github.com/valleywood/reproduction-app-dynamic-component-hydration-error-package/blob/master/index.tsx

// This leads to hydration error in the next-project
const Component = dynamic(
  () => import('./Component'), 
);

// Switching from dynamic to this makes the hydration error go away in the next-project
//import Component from './Component';

Sorry for missing to provide a npmrc file in the previous reproduction (using yarn myself so i only comitted a .yarnrc file) 😃

valleywood on Nov 29, 2023

Ah but then 🤔 it might be the same thing, ugh. I ran out of time today. I’ll have to set-up a local repository then, if workspaces trigger the same issue then it shall take no time.

Sorry for not being thorough when inspecting your OP.

And as to why the method/source of importing matters… 🤔🤷‍♂️ I’ll also look at the commits that happened around that canary.

icyJoseph on Oct 15, 2023

I can confirm that this is an error fra 13.2.0, works as i should in 13.1.0. Would be great if someone could look at this.

As a note if someone could look further at this, I had to add @valleywood:registry=https://npm.pkg.github.com to my npmrc file to be able to install your package.

tobbas on Oct 4, 2023