I've noticed some similar questions, but none of them seem to address my particular issue. I'm currently working on a webapp using next.js (with typescript). Within the app, I am utilizing recharts, however, I am encountering a compilation 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.
Currently, I am using next.js 12, which natively supports ES modules without any additional configuration required. From my understanding, the root cause lies in the fact that d3-shape is imported as ESM while recharts, which depends on it, still uses require rather than imports (indeed, upon inspection, the compiled recharts package does utilize require()).
The issue seems to stem from the way recharts handles the import of d3 shapes. Any suggestions on how this can be resolved? It's puzzling that I appear to be the only one facing this dilemma.
One potential solution could involve forking recharts and ensuring it imports d3 shapes as esm modules (by adding type: "module" to the package.json file), although this may not be the most ideal approach.
Does anyone have any insights or ideas on how to tackle this problem? I'd prefer not to switch to alternative charting packages...