Client-side JS fails to execute when using pnpm and importing react-dom on a page

[elliottsj]

What version of Next.js are you using?

10.0.6-canary.0

What version of Node.js are you using?

14.15.3

What browser are you using?

Edge (Chromium)

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

Client-side JS fails to execute in a specific scenario:

• pnpm is used to install dependencies. (using version 5.15.1 as of this writing)
• react-dom is imported in one page (about.js) but not in another page (index.js).

Expected Behavior

Client-side JS should execute when visiting the index page.

To Reproduce

Full repro: https://github.com/elliottsj/nextjs-pnpm-issue-2021-01-07

[elliottsj]

I've discovered that the problem isn't specifically with react-modal, but with react-dom in general. The problem manifests when importing react-modal since the react-modal package imports react-dom.

I've simplified the repro at nextjs-pnpm-issue-2021-01-07 accordingly.

[elliottsj]

I'm working on a fix over at #21048. In the meantime, this is a workaround:

// next.config.js

module.exports = {
  webpack: (config) => {
    // Workaround for https://github.com/vercel/next.js/issues/20884
    config.optimization.splitChunks = false;

    return config;
  },
};

[timneutkens]

To be clear disabling splitChunks is not an option if you are planning to deploy to production.

[PabloSzx]

Adding
import "react-dom";
in the _app seems to be a workaround that fixed it for my situation

[elliottsj]

This issue is still a problem for pnpm users. I would appreciate if a maintainer could comment on #21048 when you have time.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.