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	Apr 22, 2025 2:55am

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

[sam-glass]

Really need this to be merged, it's blocking a React 18 upgrade

[miko-ck]

Hey folks, thanks for your work! What is necessary to get this merged? It's been 5 months since the original PR.

[bostrom]

@plouc any chance of merging and releasing this?

[marcelmanz]

Hi! Is there anything left on this PR?

[plouc]

For now, I'm going to merge this in a non-master branch as a new package was introduced (@nivo/polar-bar), I'm going to adjust this new package and then merge in master.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f9fc881:

Sandbox	Source
nivo	Configuration