12

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

Michael Rabinovich
  • 121
  • 1
  • 6

3 Answers3

16

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.

ancan Eil
  • 169
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – HermanTheGermanHesse Aug 02 '22 at 12:20
  • 5hours of my life - thank you ! Another cautionary tale to fix all the versions in your package.json – Albert James Teddy Sep 15 '22 at 15:17
  • `2.1.12` is vulnerable package! – Rishikesh Darandale Oct 04 '22 at 12:07
1

Dynamic Imports seems to fix this issue.

import dynamic from "next/dynamic";

const Chart = dynamic(() => import("features/dashboard/Chart"), { ssr: false });
Praful Sharma
  • 11
  • 1
0

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",
  ],
};
Uri Klar
  • 3,800
  • 3
  • 37
  • 75