Change devDependency to dependency

[joshribakoff-sm]

You have d3-scale as a devDependency for nivo legends https://github.com/plouc/nivo/blob/master/packages/legends/package.json#L27

When we try to run your basic "hello world" examples we got:

Cannot find module 'd3-scale' from '../../node_modules/@nivo/legends/dist/nivo-legends.cjs.js'

    Require stack:
      /my-project/node_modules/@nivo/legends/dist/nivo-legends.cjs.js
      /my-project/node_modules/@nivo/line/dist/nivo-line.cjs.js

This should be moved to dependency or added as a peerDependency (preferably the former), otherwise it requires the user of Nivo to debug this. Naively one may try to install d3-scale in their package.json which will cause even more issues since the latest major version of said package is relying on experimental node features which will throw nonsensical errors taking the user further down the rabbit hole.

I believe this one small fix will greatly improve the DX for this library.

The code you publish in your dist for legends does a require("d3-scale") so this is not a devDependency.

[lillijo]

I guess this issue is related? I am getting this error trying to use @nivo/line ( I already have d3-scale installed for something else)

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

[joshribakoff-sm]

@lillijo Try to downgrade the major version of d3-scale, you're running into the same issue we hit.

[davidcalhoun]

I added more details to #1951, but in short in 0.79 @nivo/legends is now using d3-scale and @nivo/colors in compute.ts. Both dependencies were added to legend's devDependencies, but since this code appears to run in prod it should be added to dependencies instead.

If using Yarn 2/3 berry you can add this temporary workaround to .yarnrc.yml which clears up the error (don't forget to rerun yarn install after adding it):

# .yarnrc.yml

...

packageExtensions:
    '@nivo/legends@*':
        dependencies:
            'd3-scale': '*'
            '@nivo/colors': '*'
...

Another successful workaround is to downgrade Nivo to 0.78

[davidcalhoun]

I think there's a slightly different issue mentioned by @joshribakoff-sm I'm seeing this issue with d3-scale v4 when trying to build the app with Next.js:

../../.yarn/__virtual__/@nivo-legends-virtual-c3468b9dca/0/cache/@nivo-legends-npm-0.79.1-dd1c63aa09-1f4bb8da28.zip/node_modules/@nivo/legends/dist/nivo-legends.cjs.js
Module not found: ESM packages (d3-scale) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

EDIT: switching to Next.js loose mode as suggested by the link in the error seems to fix the issue!

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[davidcalhoun]

Bump

[netzwerg]

If using Yarn 2/3 berry you can add this temporary workaround to .yarnrc.yml which clears up the error (don't forget to rerun yarn install after adding it):

# .yarnrc.yml

...

packageExtensions:
    '@nivo/legends@*':
        dependencies:
            'd3-scale': '*'
            '@nivo/colors': '*'
...

This only worked for me if declared as peerDependencies (possibly because I had both of them as dependencies in my package.json already):

...
 packageExtensions:
     '@nivo/legends@*':
         peerDependencies:
             'd3-scale': '*'
             '@nivo/colors': '*'
 ...

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[joshribakoff-sm]

Not stale.

[eholt201]

finding nivo unusable with create-t3-app due to this issue, any suggestions?

[plouc]

I'm trying to address this issue in https://github.com/plouc/nivo/pull/2313

[IshfaqAhmedProg]

Has this issue been fixed? I'm still getting this error while trying to use @nivo/funnel

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

It gets fixed if I change my next js config to

const nextConfig = { reactStrictMode: true, transpilePackages: ["@nivo"], experimental: { esmExternals: "loose", } }

But this hardly seems like a solution, and I'm kind of stuck using nivo, as I found only nivo to provide really good React-friendly docs and good-looking default styling. I've used react-chart-js-2 and material UI, as well on the project could those be causing conflicts?

[plouc]

@IshfaqAhmedProg why do you think it's not a solution? This is what next recommends in such case.

I'm kind of stuck using nivo, as I found only nivo to provide really good React-friendly docs and good-looking default styling.

It seems like you're "stuck" for good reasons at least :)

Also the issue you're reporting is different from this one, it's more about https://github.com/plouc/nivo/issues/2310.

[plouc]

The issue has been solved in 0.82.0 via #2313.

[julienmunar]

@plouc hello, so what do we have to do to correct the issue ?

[plouc]

@julienmunar hello, to install the latest version, but please note that you might run into import issues depending on your setup due to esm only d3 packages (#2310).

[mt-hagen]

Hi @plouc - I am still experiencing this issue in 0.83.0, is this a common issue?

[Joeghanoe]

Experiencing this issue in 0.83.0 aswell here, how can we prevent this from happening?

[KupriyanovNikita]

Also bumped this issue in 0.83.0

[plouc]

@mt-hagen, @Joeghanoe, @KupriyanovNikita, could you please provide more details? I'm a bit confused that it still happens as there's no dev dependencies anymore: https://github.com/plouc/nivo/blob/v0.83.0/packages/legends/package.json.

[lucaslosi]

i got a similar error building my nextjs project. Heres the trace if it helps:

info  - Collecting page data ...Error [ERR_REQUIRE_ESM]: require() of ES Module [***]\node_modules\d3-color\src\index.js from [***]\node_modules\@nivo\colors\dist\nivo-colors.cjs.js not supported.

importing these as dependencies:

        "@nivo/bar": "^0.83.0",
        "@nivo/core": "^0.83.0",
        "@nivo/line": "^0.83.0",
        "@nivo/pie": "^0.83.0",

[plouc]

There are 2 different issues, which can be confusing I guess, dependencies weren't properly defined, it's especially an issue when using pnpm for example (this issue), this has been fixed, the other issue is: https://github.com/plouc/nivo/issues/2310

[TejasFresh]

I still get the same error in 0.83 when I use @nivo/line

[coderdix24]

same issue with @nivo/radial-bar

[coderdix24]

@IshfaqAhmedProg why do you think it's not a solution? This is what next recommends in such case.

I'm kind of stuck using nivo, as I found only nivo to provide really good React-friendly docs and good-looking default styling.

It seems like you're "stuck" for good reasons at least :)

Also the issue you're reporting is different from this one, it's more about #2310.

this didn't work for me, getting error /node_modules/@nivo/colors/dist/nivo-colors.cjs.js not supported.

Instead change the require of index.js in /srv/v2/browser/node_modules/@nivo/colors/dist/nivo-colors.cjs.js to a dynamic import() which is available in all CommonJS modules.

[IshfaqAhmedProg]

@IshfaqAhmedProg why do you think it's not a solution? This is what next recommends in such case.

I'm kind of stuck using nivo, as I found only nivo to provide really good React-friendly docs and good-looking default styling.

It seems like you're "stuck" for good reasons at least :) Also the issue you're reporting is different from this one, it's more about #2310.

this didn't work for me, getting error /node_modules/@nivo/colors/dist/nivo-colors.cjs.js not supported.

Instead change the require of index.js in /srv/v2/browser/node_modules/@nivo/colors/dist/nivo-colors.cjs.js to a dynamic import() which is available in all CommonJS modules.

Try updating using npm i @nivo/[email protected] @nivo/<modname>@0.83.0 replace modname with the module you're using like "funnel", "bar" etc. and then try changing the next js config. Thats what worked for me, you will still get the high risk vulnerabilities found when you run "npm audit". Without this package i get 5 moderate vulnerabilities, with the package i get 21 high risk and 5 moderate!

[coderdix24]

Try updating using npm i @nivo/[email protected] @nivo/<modname>@0.83.0 replace modname with the module you're using like "funnel", "bar" etc. and then try changing the next js config. Thats what worked for me, you will still get the high risk vulnerabilities found when you run "npm audit". Without this package i get 5 moderate vulnerabilities, with the package i get 21 high risk and 5 moderate!

I appreciate your reply! I had it at that version and still getting the same error - I'm not sure what to do, really needed that radial bar chart

[IshfaqAhmedProg]

Try updating using npm i @nivo/[email protected] @nivo/<modname>@0.83.0 replace modname with the module you're using like "funnel", "bar" etc. and then try changing the next js config. Thats what worked for me, you will still get the high risk vulnerabilities found when you run "npm audit". Without this package i get 5 moderate vulnerabilities, with the package i get 21 high risk and 5 moderate!

I appreciate your reply! I had it at that version and still getting the same error - I'm not sure what to do, really needed that radial bar chart

I forgot to say even i had it at 0.83.0 when i first installed the package, then after encountering the error i ran npm audit fix --force which downgraded the package version to, from what i remember, 0.81.0, then i manually updated it using the command stated above, that let me use it fine without any runtime error! Also if you're using next js in the #2310 issue, some people solved it using dynamic import although that didnt work for me as i needed it to be SSR!

[bruno-gurgel]

Still having this problem on 0.83.0. Any solution by now?

[mmaker]

same here