plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.11k stars 1.03k forks source link

feat: Support native esm #2643

Open odanado opened 1 month ago

odanado commented 1 month ago

Close https://github.com/plouc/nivo/issues/2310

Description

This error is caused by the bundler treating the .es.js file as a CJS (faux ESM).

Error: require() of ES Module node_modules/d3-interpolate/src/index.js from node_modules/@nivo/core/dist/nivo-core.cjs.js not supported. Instead change the require of index.js in node_modules/@nivo/core/dist/nivo-core.cjs.js to a dynamic import() which is available in all CommonJS modules.

I changed the extension of the .es.js file to .mjs so it would always be treated as an ES Module.

Changes

add ext for lodash

Since the extension cannot be omitted in ES Modules, I changed it to indicate it.

use .mjs for esm files

Changing the file extension to .mjs will treat these files as ES Modules.

add exports field

The modules field in package.json is a non-standard feature. I have added an exports field to replace it.

Check behavior

You can try out the changes with this pull request. https://github.com/odan-sandbox/nivo/pull/2

You can install the package that includes this change with the following command.

pnpm add https://pkg.pr.new/odanado/nivo/@nivo/bar@2

Here is an example repository that uses this package with Next.js. https://github.com/odan-sandbox/nextjs-esm-sandbox

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
nivo ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 28, 2024 4:21pm
msimonc commented 1 month ago

(using next / sst). ( it works with warnings)

The original error was in core, yes? so after your bar install I did: npm i https://pkg.pr.new/odanado/nivo/@nivo/core@2

npm warn ERESOLVE overriding peer dependency npm warn While resolving: @nivo/axes@0.87.0 npm warn Found: peer react@">= 16.14.0 < 19.0.0" from the root project npm warn npm warn Could not resolve dependency: npm warn peer react@">= 16.14.0 < 19.0.0" from the root project npm warn ERESOLVE overriding peer dependency npm warn While resolving: @nivo/bar@0.87.0 npm warn Found: peer react@">= 16.14.0 < 19.0.0" from the root project npm warn npm warn Could not resolve dependency: npm warn peer react@">= 16.14.0 < 19.0.0" from the root project npm warn ERESOLVE overriding peer dependency npm warn While resolving: @nivo/colors@0.87.0 npm warn Found: peer react@">= 16.14.0 < 19.0.0" from the root project npm warn npm warn Could not resolve dependency: npm warn peer react@">= 16.14.0 < 19.0.0" from the root project npm warn ERESOLVE overriding peer dependency npm warn While resolving: @nivo/legends@0.87.0 npm warn Found: peer react@">= 16.14.0 < 19.0.0" from the root project npm warn npm warn Could not resolve dependency: npm warn peer react@">= 16.14.0 < 19.0.0" from the root project npm warn ERESOLVE overriding peer dependency npm warn While resolving: @nivo/tooltip@0.87.0 npm warn Found: peer react@">= 16.14.0 < 19.0.0" from the root project

odanado commented 1 month ago

@msimonc I tried installing @nivo/core in a project with the following package.json.

{
  "name": "example",
  "type": "module",
  "dependencies": {
    "react": "^19.0.0-rc-e56f4ae3-20240830"
  }
}
# npm version
$ npm install @nivo/core
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: example@undefined
npm error Found: react@19.0.0-rc-fb9a90fa48-20240614
npm error node_modules/react
npm error   react@"^19.0.0-rc-e56f4ae3-20240830" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@">= 16.14.0 < 19.0.0" from @nivo/core@0.87.0
npm error node_modules/@nivo/core
npm error   @nivo/core@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/odan/.npm/_logs/2024-09-01T04_36_05_435Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/odan/.npm/_logs/2024-09-01T04_36_05_435Z-debug-0.log

# my patch version
$ npm i https://pkg.pr.new/odanado/nivo/@nivo/core@2
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: example@undefined
npm error Found: react@19.0.0-rc-fb9a90fa48-20240614
npm error node_modules/react
npm error   react@"^19.0.0-rc-e56f4ae3-20240830" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@">= 16.14.0 < 19.0.0" from @nivo/core@0.87.0
npm error node_modules/@nivo/core
npm error   @nivo/core@"https://pkg.pr.new/odanado/nivo/@nivo/core@2" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/odan/.npm/_logs/2024-09-01T04_36_20_539Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/odan/.npm/_logs/2024-09-01T04_36_20_539Z-debug-0.log

Since the same error occurs with both @nivo/core installations, this patch does not cause your error.

This error is probably caused by this line in @nivo/core. https://github.com/plouc/nivo/blob/v0.87.0/packages/core/package.json#L37-L39