Error: require() de módulo ES no es compatible al usar recharts con next.js (y typescript)

Veo algunas preguntas de este tipo, pero ninguna de ellas realmente aborda mi problema. Estoy desarrollando una aplicación web usando Next.js (trabajando con TypeScript). En mi aplicación uso Recharts, pero la compilación falla con este 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.

Ahora, estoy usando next.js 12, que soporta módulos ES de manera nativa, no se necesita configuración adicional. Según entiendo, el problema es que d3-shape ahora se importa como ESM, pero recharts, que lo utiliza, todavía lo require en lugar de importarlo (esto es cierto, el paquete de recharts "compilado" sí usa require())

Entonces el problema no es mi aplicación, sino la forma en que recharts está importando d3-shapes, pero ¿cómo puedo solucionarlo? No tiene sentido que sea el único que está sufriendo por esto.

Supongo que puedo crear un fork de recharts y asegurarme de que importe d3-shapes como módulos esm (agregando type: "module" al archivo package.json), pero esto es muy feo.

¿Alguien tiene alguna idea? Realmente no quiero ir y usar otros paquetes de gráficos...

Respuesta #1

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

hablando sobre el mismo tema en el enlace correspondiente.

Degradar la versión del paquete de recharts a "2.1.12" resolverá el problema. En mi caso, está resuelto.