Change devDependency to dependency #1941

joshribakoff-sm · 2022-03-01T21:03:30Z

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.

The text was updated successfully, but these errors were encountered:

lillijo · 2022-03-09T17:19:31Z

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 · 2022-03-09T19:51:40Z

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

davidcalhoun · 2022-03-14T19:07:38Z

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 · 2022-03-14T19:20:47Z

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 · 2022-06-13T01:23:14Z

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 · 2022-06-13T14:41:48Z

Bump

netzwerg · 2022-08-15T12:18:17Z

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': '*'
 ...

See plouc/nivo#1941

stale · 2023-02-02T02:13:05Z

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 · 2023-02-02T18:31:55Z

Not stale.

eholt201 · 2023-03-24T14:54:39Z

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

plouc · 2023-04-28T22:52:43Z

I'm trying to address this issue in #2313

plouc/nivo#1941

IshfaqAhmedProg · 2023-05-12T19:41:34Z

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 · 2023-05-12T19:57:41Z

@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.

plouc · 2023-05-12T20:01:22Z

The issue has been solved in 0.82.0 via #2313.

julienmunar · 2023-05-16T09:40:15Z

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

plouc · 2023-05-16T09:48:47Z

@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 · 2023-05-25T09:59:26Z

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

Joeghanoe · 2023-05-29T16:44:05Z

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

KupriyanovNikita · 2023-06-15T16:27:38Z

Also bumped this issue in 0.83.0

plouc · 2023-06-15T17:48:00Z

@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 · 2023-06-19T18:31:13Z

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 · 2023-06-26T02:29:38Z

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: #2310

TejasFresh · 2023-07-06T11:45:53Z

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

coderdix24 · 2023-07-07T20:03:26Z

same issue with @nivo/radial-bar

coderdix24 · 2023-07-07T20:10:47Z

@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 · 2023-07-07T22:37:42Z

@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/core@0.83.0 @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 · 2023-07-07T23:07:08Z

Try updating using npm i @nivo/core@0.83.0 @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 · 2023-07-07T23:21:04Z

Try updating using npm i @nivo/core@0.83.0 @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 · 2023-07-20T16:04:04Z

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

mmaker · 2023-07-26T12:06:36Z

same here

codesjedi · 2023-08-28T20:14:20Z

same here

willemmulder · 2023-08-31T12:58:40Z

@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.

@plouc Could you implement this fix? Thanks!

willemmulder · 2023-08-31T13:02:16Z

For an ugly workaround in Next.js you could add the following to your next.config.js

transpilePackages: ["@nivo"], 
experimental: { esmExternals: "loose" }

pixelmultiplo · 2023-09-12T09:55:21Z

So it's unusable in next.js?

javierfuentesm · 2023-09-12T18:14:37Z

im having this issue with remix too any dieas?

DaveCole · 2023-09-13T16:44:12Z

Same issue with @nivo/network - using the loose mode in next.config.js only seems to fix the issue every 2-3 reloads (this is using Next v12). Can confirm that rolling back to 0.79 fixes the issue @plouc - my instincts tell me this has something to do with server-side rendering maybe?

edit: rolling back to 0.79 fixed Network but broke Bullet. See my workaround below.

DaveCole · 2023-09-14T20:50:14Z

For what it's worth, a workaround is to wrap a container component around the offending Nivo chart (I have trouble with Network and Bullet at the moment, but I suspect it's all the charts), save it as it's own file so that's the file that imports directly from @nivo, and then use Next.js's dynamic import with ssr: false to import it during a client-side render:

import dynamic from 'next/dynamic';

...

const MyResponsiveNetwork = dynamic(() => import('./MyResponsiveNetwork'), { ssr: false } );

Jon-Robb · 2024-05-01T00:15:15Z

For what it's worth, a workaround is to wrap a container component around the offending Nivo chart (I have trouble with Network and Bullet at the moment, but I suspect it's all the charts), save it as it's own file so that's the file that imports directly from @nivo, and then use Next.js's dynamic import with ssr: false to import it during a client-side render:
import dynamic from 'next/dynamic';

...

const MyResponsiveNetwork = dynamic(() => import('./MyResponsiveNetwork'), { ssr: false } );

This fixed the issue for me thanks

camiloux · 2024-05-25T16:41:35Z

TL;DR: The error occurs on the server side; try client-side loading instead.

I encountered the same issue when using the Nivo library with Astro and React:

"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."

This issue arises when trying to use nivo components on the server side. I resolved it by configuring my component to load client-side only. In Astro, you can do this by setting client:only="react". After making this change, everything worked smoothly, and my chart rendered as expected. For reference, I'm using Nivo version 0.87.0.

For developers facing similar issues with Next.js, you might need to set ssr: false to ensure the components load on the client side only.

davidcalhoun mentioned this issue Mar 14, 2022

0.79 regression: Yarn 3 berry errors with @nivo/legends dependencies (d3-scale and @nivo/colors) #1951

Closed

stale bot added the stale label Jun 13, 2022

stale bot removed the stale label Jun 13, 2022

davidcalhoun mentioned this issue Jul 18, 2022

Peer dependency chain break when using yarn PnP #2014

Closed

phgn0 added a commit to lindylearn/unclutter that referenced this issue Dec 11, 2022

Fix @nivo/stream build

f840a37

See plouc/nivo#1941

stale bot added the stale label Feb 2, 2023

stale bot removed the stale label Feb 2, 2023

plouc mentioned this issue Apr 28, 2023

Infrastructure maintenance #2313

Merged

yoshikouki added a commit to yoshikouki/AwAs that referenced this issue May 7, 2023

Fix nivo import bugs

14ef736

plouc/nivo#1941

Cugniere mentioned this issue May 11, 2023

Met à jour nivo en version 0.83 betagouv/mes-aides-analytics#61

Closed

plouc closed this as completed May 12, 2023

baptou12 mentioned this issue Jul 24, 2023

build(deps): bump @nivo/bar from 0.80.0 to 0.83.0 betagouv/mes-aides-analytics#99

Closed

baptou12 mentioned this issue Nov 27, 2023

build(deps): bump @nivo/bar from 0.80.0 to 0.84.0 betagouv/mes-aides-analytics#164

Merged

renet mentioned this issue Jan 22, 2024

Error when using in Next.js: Unexpected token 'export' hugocxl/react-echarts#15

Open

3 tasks

Change devDependency to dependency #1941

Change devDependency to dependency #1941

Comments

joshribakoff-sm commented Mar 1, 2022 • edited Loading

lillijo commented Mar 9, 2022 • edited Loading

joshribakoff-sm commented Mar 9, 2022

davidcalhoun commented Mar 14, 2022 • edited Loading

davidcalhoun commented Mar 14, 2022 • edited Loading

stale bot commented Jun 13, 2022

davidcalhoun commented Jun 13, 2022

netzwerg commented Aug 15, 2022

stale bot commented Feb 2, 2023

joshribakoff-sm commented Feb 2, 2023

eholt201 commented Mar 24, 2023

plouc commented Apr 28, 2023

IshfaqAhmedProg commented May 12, 2023

plouc commented May 12, 2023

plouc commented May 12, 2023

julienmunar commented May 16, 2023

plouc commented May 16, 2023 • edited Loading

mt-hagen commented May 25, 2023

Joeghanoe commented May 29, 2023

KupriyanovNikita commented Jun 15, 2023

plouc commented Jun 15, 2023

lucaslosi commented Jun 19, 2023

plouc commented Jun 26, 2023

TejasFresh commented Jul 6, 2023

coderdix24 commented Jul 7, 2023

coderdix24 commented Jul 7, 2023

IshfaqAhmedProg commented Jul 7, 2023 • edited Loading

coderdix24 commented Jul 7, 2023

IshfaqAhmedProg commented Jul 7, 2023

bruno-gurgel commented Jul 20, 2023

mmaker commented Jul 26, 2023

codesjedi commented Aug 28, 2023

willemmulder commented Aug 31, 2023

willemmulder commented Aug 31, 2023

pixelmultiplo commented Sep 12, 2023

javierfuentesm commented Sep 12, 2023

DaveCole commented Sep 13, 2023 • edited Loading

DaveCole commented Sep 14, 2023 • edited Loading

Jon-Robb commented May 1, 2024

camiloux commented May 25, 2024

joshribakoff-sm commented Mar 1, 2022 •

edited

Loading

lillijo commented Mar 9, 2022 •

edited

Loading

davidcalhoun commented Mar 14, 2022 •

edited

Loading

davidcalhoun commented Mar 14, 2022 •

edited

Loading

plouc commented May 16, 2023 •

edited

Loading

IshfaqAhmedProg commented Jul 7, 2023 •

edited

Loading

DaveCole commented Sep 13, 2023 •

edited

Loading

DaveCole commented Sep 14, 2023 •

edited

Loading