CODEWITHSUNDEEP
typescriptnext.jses6-modulesrecharts
Michael Rabinovich
Michael Rabinovich

Reputation: 131

Error: require() of ES module is no supported when using recharts with next.js (and typescript)

I see some questions of this kind, but none of them really gets my problem. I'm developing a webapp using next.js (working with typescript). In my app uses recharts, but the compilation fails with this error:

Error: Must use import to load ES Module: project_path\node_modules\d3-shape\src\index.js
require() of ES modules is not supported.
require() of project_path\node_modules\d3-shape\src\index.js from project_path\node_modules\recharts\lib\shape\Symbols.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from project_path\node_modules\d3-shape\package.json.

Now, I'm using next.js 12 which supports ES modules out of the box, no additional config needed. As I understand it, the problem is that d3-shape is now imported as ESM, but recharts, which uses it still requires it instead of importing it (this is true, the "complied" recharts package does use require())

So the problem is not my App, but the way recharts is importing d3-shapes, but how can I solve it? It doesn't make sense that I'm the only one suffering from it.

I guess I can fork recharts and make sure it imports d3-shapes as esm modules (adding type: "module" to the package.json file) but this is very ugly.

Any one has any ideas? I really don't want to go and use other charting packages...

Upvotes: 13

Views: 9917

Answers (3)

Praful Sharma
Praful Sharma

Reputation: 9

Dynamic Imports seems to fix this issue.

import dynamic from "next/dynamic";

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

Upvotes: 0

Uri Klar
Uri Klar

Reputation: 3988

If you've reached here with the same error but with Remix Run, see this section of the docs: https://remix.run/docs/en/v1/pages/gotchas#importing-esm-packages

This is how my config file looked to make it compile:

//in remix.config.js
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
  serverDependenciesToBundle: [
    "recharts",
    "d3-shape",
    "d3-scale",
    "d3-path",
    "d3-array",
    "d3-time",
    "d3-format",
    "d3-interpolate",
    "d3-time-format",
    "d3-color",
    "internmap",
  ],
};

Upvotes: 0

ancan Eil
ancan Eil

Reputation: 177

https://github.com/recharts/recharts/issues/2918

talking about the same issue on the corresponding link.

Downgrading the package version of recharts to "2.1.12" will solve the problem. In my case, it's solved.

Upvotes: 16

Related Questions