错误：使用带有 next.js（和打字稿）的重新图表时，不支持 ES 模块的 require()

Question

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 require s 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...

Answer 1

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.

Answer 2

Dynamic Imports seems to fix this issue.

import dynamic from "next/dynamic";

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

Answer 3

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",
  ],
};