feat: Support native esm

[odanado]

Close #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.
odan-sandbox#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]

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]

(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]

@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

[ferdiamg]

Any idea when this is going to be merged?

Thank you for your work!