ES Modules / CommonJS error in next.js 14.2.5

[TheMikeyRoss]

I have react-day-picker component in my next.js app and it used to work perfectly but after updating to v9 now im getting this critical error.

node_modules\.pnpm\[email protected][email protected]\node_modules\react-day-picker\dist\cjs\index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead either rename C:\code\MIKEY\node_modules\.pnpm\[email protected][email protected]\node_modules\react-day-picker\dist\cjs\index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\code\MIKEY\node_modules\.pnpm\[email protected][email protected]\node_modules\react-day-picker\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

if I add type=module in my package.json of my next.js app everything breaks and I have to change things in next.config and i18n.js and dozen other files, and after going through all of that it caused more errors that I could solve.

I'm I doing something wrong?

[gpbl]

@TheMikeyRoss interesting, thanks for the report. How do I reproduce this?

[TheMikeyRoss]

Yes,

1. Make a new next.js app (pages router)
2. Add @sikka/hawa@next to the next app
3. Import the DatePicker to it
4. Make sure to import import "@sikka/hawa/dist/style.css" to _app.tsx
5. Now try to use the DatePicker component anywhere and you should see the same error

I will try to make a stackblitz reproduction

[TheMikeyRoss]

Stackblitz Reproduction

https://stackblitz.com/edit/nextjs-8bsfgq?file=pages%2Findex.js

[TheMikeyRoss]

Not sure if it's the way @sikka/hawa is bundled by tsup:
https://github.com/sikka-software/Hawa/blob/946889690fbdd0a0cef1f4f1c4eaa92db4869568/packages/components/tsup.config.js#L28-L47

or if it's the pacakge.json of @sikka/hawa:
https://github.com/sikka-software/Hawa/blob/main/package.json

[gpbl]

sikka-software/Hawa@9468896/packages/components/tsup.config.js#L28-L47

A workaround there could be to use esm before cjs:

https://github.com/sikka-software/Hawa/blob/946889690fbdd0a0cef1f4f1c4eaa92db4869568/packages/components/tsup.config.js#L37

I am not sure why cjs is not working there, I'll try to fix it.

[zaaakher]

A workaround there could be to use esm before cjs:

I just tried that but unfortunately we're still getting the same error

[zaaakher]

I downgraded react-day-picker to v8.10.1 in @sikka/[email protected] upward in sikka-software/Hawa@71d696d

[gpbl]

Thanks @zaaakher for the follow--back. This with CJS vs ESM is actually an issue I have since long when publishing on npm.

Somebody could give a look to what is wrong in the package.json? I'm out of ideas and I can't setup reproducible cases for the issue.

• Consider fix: Add type module in package.json #2230 by @ArthurGoupil that may have introduced this problem.
• Should I remove cjs completely? Why it is still needed?

[strmer15]

One other idea here: add a package.json file to the dist/cjs folder that says

{
  "type": "commonjs"
}

and Node / bundlers will then use the CommonJS module loader to read the files.

https://webpack.js.org/guides/ecma-script-modules/#flagging-modules-as-esm

[TheMikeyRoss]

@gpbl is it published to npm? in 9.0.0-rc.6 ?

[gpbl]

Thanks @strmer15! The fix - touching a package.json in dist/cjs - should work also for @sikka/hawa

@TheMikeyRoss @zaaakher v9.0.6 should be published including the fix. Hopefully it works: I appreciate your feedback, thanks.

[zaaakher]

Works like a charm, thanks @gpbl @strmer15 👍