Next incorrectly requires the common.js version of the package when ES version is present

[tomitrescak]

Verify canary release

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

Provide environment information

Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:46:32 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T6000
Binaries:
Node: 18.2.0
npm: 8.9.0
Yarn: 1.22.18
pnpm: 7.0.1
Relevant packages:
next: 12.1.4
react: 17.0.2
react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I am trying to use the @minoru/react-dnd-treeview package, which is compiled to both, ESM and Commonjs. When importing this package I receive a following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/30031005/Github/jobfit/node_modules/.pnpm/react-dnd-html5-backend@16.0.1/node_modules/react-dnd-html5-backend/dist/index.js from /Users/30031005/Github/jobfit/node_modules/.pnpm/@minoru+react-dnd-treeview@2.0.0_gduabpky35lid5xjxswb2punc4/node_modules/@minoru/react-dnd-treeview/dist/index.js not supported.
Instead change the require of /Users/30031005/Github/jobfit/node_modules/.pnpm/react-dnd-html5-backend@16.0.1/node_modules/react-dnd-html5-backend/dist/index.js in /Users/30031005/Github/jobfit/node_modules/.pnpm/@minoru+react-dnd-treeview@2.0.0_gduabpky35lid5xjxswb2punc4/node_modules/@minoru/react-dnd-treeview/dist/index.js to a dynamic import() which is available in all CommonJS modules.

the issue is that Next starts to import the /node_modules/@minoru/react-dnd-treeview/dist/index.js albeit the /node_modules/@minoru/react-dnd-treeview/dist/index.esm.js is present. The problem is, that the "index.js" then imports the react-dnd-html5-backend package which exists only as ESM and no commonjs.

The solution would be to start importing the ESM directly (which next claims is the default behaviour)

Expected Behavior

I can import the package correctly.

To Reproduce

install @minoru/react-dnd-treeview

use this as your index page:

import {
  DndProvider,
  getBackendOptions,
  MultiBackend,
} from "@minoru/react-dnd-treeview";

export default function Page() {
  return (
    <DndProvider
      backend={MultiBackend}
      debugMode={true}
      options={getBackendOptions()}
    >
      <div>wewwe</div>
    </DndProvider>
  );
}

[ketiboldiais]

Were you able to solve this problem? Ran into this problem this morning and have spent a few hours trying to figure this out.

[tomitrescak]

Nope, the package developer who I reported this to released only the ES version of the package, since the CommonJS version did not make sense since the package dependencies were ES only. Sorry :/

[ketiboldiais]

Thanks for letting me know. Looked over my packages and ran into the same problem source—ES only dependencies.

[siawyoung]

Oh dear, had this problem too. Thanks guys.

[huozhi]

This is fixed with latest nextjsm tested with next.js 14.0.4

[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.