`DayPicker`: ESM issue when importing

TheMikeyRoss commented 1 month ago

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

Components

Which component group is your issue related to?

Elements

Link to the code that reproduces this issue or a replay of the bug

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

To Reproduce

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

Current vs. Expected behavior

Currently I get this error

node_modules\.pnpm\react-day-picker@9.0.4_react@18.3.1\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\react-day-picker@9.0.4_react@18.3.1\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\react-day-picker@9.0.4_react@18.3.1\node_modules\react-day-picker\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

I should face no issues just like how it used to be