Error in nextjs with recharts

[harshmangalam]

Server Error Error: require() of ES Module /home/l10006blr/Development/Nextjs/plants-shop/node_modules/d3-shape/src/index.js from /home/l10006blr/Development/Nextjs/plants-shop/node_modules/recharts/lib/shape/Symbols.js not supported. Instead change the require of index.js in /home/l10006blr/Development/Nextjs/plants-shop/node_modules/recharts/lib/shape/Symbols.js to a dynamic import() which is available in all CommonJS modules.

[iamveekthorr]

Server Error Error: require() of ES Module /home/l10006blr/Development/Nextjs/plants-shop/node_modules/d3-shape/src/index.js from /home/l10006blr/Development/Nextjs/plants-shop/node_modules/recharts/lib/shape/Symbols.js not supported. Instead change the require of index.js in /home/l10006blr/Development/Nextjs/plants-shop/node_modules/recharts/lib/shape/Symbols.js to a dynamic import() which is available in all CommonJS modules.

i'm having the same issue as well

node: 16.1.0 next: 12.2.3 react: 18.2.0 recharts: 2.1.13

[WolfyUK]

Sounds like a duplicate of #2915

[filipedeschamps]

I'm receiving the same error. Had to downgrade to 2.1.9 🤝

[ChaBen]

The version I've been using is 2.1.9 and I haven't updated it. I had to change it to "recharts ": "^2.1.9" → "recharts": "2.1.9" 删除^后得到了帮助

[charklewis]

I had this error with Remix. I had to downgrade to 2.1.12.

[filipedeschamps]

@charklewis great! 2.1.12 works here too 👍

[ochoadan]

Same Error Downgrading didn't fix

[HT-Moh]

Confirm the same issue when running yarn run build tested with

"recharts ": "^2.1.13 -> issue exists "recharts ": "^2.1.12 -> issue exists "recharts ": "2.1.12 -> works

[peterjuras]

Is a fix planned for this issue? I also dwongraded to 2.1.12

[ghost]

same error here

[jackblackCH]

same. downgraded to 2.1.9 and fixed version.

[donpark]

Same. Downgraded to 2.1.12 bc 2.1.9 had react-resize-detector issue w/React v18.

[RicardoPBarbosa]

Downgrade didn't work for me. Next 12.2.4 & React 18.2.0

[filipedeschamps]

@RicardoPBarbosa make sure you are pinning the version you want. So instead of ^2.1.12 force install 2.1.12

[ochoadan]

Downgrade didn't work for me. Next 12.2.4 & React 18.2.0

Yeah same problem, i think its a problem with next. It worked when i implemented mantine-ui though.

Anyway i moved to d3js for Next.js because with almost 400 issues i doubt this issue will get fixed anytime soon.

[dracoalv]

i have the same problem, here is not working even in version 2.1.12

[nephix]

Works for me with

"next": "^12.1.4",
"react": "17.0.2",
"recharts": "2.1.12"

[DelcioLuis]

I had this same problem in the past. Go to your packege.json and add "recharts": "2.1.9",

[fhodun]

changed

"recharts": "^2.1.13"

to

"recharts": "2.1.12"

and works

PS make sure to remove the ^ mark because I forgot to do it

[jmfrancois]

Your error come from d3 which has been upgrade to 7.x d3 7.x has a major change about distribution which is now in esm. You can read more about this https://devclass.com/2021/06/15/d3-7-0-goes-all-in-on-ecmascript-modules/

So you have to make your nextjs server friendly with esm From what I see the support on nextjs side is still on the roadmap but a hack exists: https://github.com/vercel/next.js/issues/706 https://www.npmjs.com/package/next-transpile-modules

[Itrulia]

@jmfrancois it comes not from the package "d3", but from d3-shape Unfortunately, they didn't make a breaking change in that package like they are supposed to...

I guess it would have been nice to lock the version in recharts, but hindsight is 20/20

[DEV-XiA]

changed

"recharts": "^2.1.13"

to

"recharts": "2.1.12"

and works

PS make sure to remove the ^ mark because I forgot to do it

nextjs 12.2.5, recharts 2.1.13, can not fix it with your way ,but thanks a lot.

[jmfrancois]

@Itrulia this is d3 global which is a set of d3-* package. d3-shape is the first which fail so nextjs stop but all of d3-XX packages are now pure ESM so they will fail into nextjs the same way.

This issue should be moved to d3 repository

[Itrulia]

@jmfrancois I know, but the package isn't d3, it's d3-shape.

[donpark]

The point is that it should be fixed on d3 side regardless of actual package name.

It could be fixed in recharts or even apps but it's going to get messy for everyone.

[Itrulia]

The point is that it should be fixed on d3 side regardless of actual package name.

My point is that the package should be fixed in the package.json because the d3 package is following semver but the d3-shapes is not.

It's also important to be precise in a comment like this because people will check their packages and be confused why theres no d3 package.

[puku0x]

For those who using recharts@^2.1.3 with Next.js v12, this seems to work.

const path = require('path');

function generateIncludes(modules) {
  return [
    new RegExp(`(${modules.join('|')})$`),
    new RegExp(`(${modules.join('|')})/(?!.*node_modules)`),
  ];
}

const includes = generateIncludes(['recharts']);

const nextConfig = {
  experimental: {
    esmExternals: 'loose', // https://nextjs.org/docs/messages/import-esm-externals
  },
  webpack: (config, options) => {
    // Big thanks to https://github.com/d3/d3-format/issues/114#issuecomment-826338584
    config.externals = config.externals.map((external) => {
      if (typeof external !== 'function') return external;
      return ({ context, request, dependencyType, getResolve }, callback) => {
        return includes.find((i) =>
          i.test(
            request.startsWith('.') ? path.resolve(context, request) : request
          )
        )
          ? callback() // i.e., not an external
          : external(
              { context, request, dependencyType, getResolve },
              callback
            );
      };
    });
    return config;
  },
};

module.exports = nextConfig;

[jmfrancois]

thanks @puku0x , the issue can be close

[talatkuyuk]

I suffered with the same issue (using recharts@^2.1.4 with Next.js v12.3.1)

I solved it by using dynamic import.

Before: I would imported the component which uses recharts

import Chart from "features/dashboard/Chart";

Now: Using dynamic import

import dynamic from "next/dynamic";

const Chart = dynamic(() => import("features/dashboard/Chart"), { ssr: false });

(I did not add webpack configuration into the config file.)

This solved my problem; hope helps you.

[ckifer]

Hi all,

Please upgrade to the latest recharts where d3 versions have been reverted.

Please watch for the merging and release of #3120 to fix the security vulnerability in d3-color. This change will be non breaking.

Thank you, Going to close this as resolved outside of 2.1.13 and 2.1.14