Cuando trato de usar D3 con Next.js, no puedo superar este error cuando uso D3.js v7.0.0 con Next.js v11.0.1.:
[ERR_REQUIRE_ESM]: debe usar la importación para cargar el módulo ES
next-transpile-modules sin suertecreate-react-app pero necesito que D3 funcione con Next.js v11.0.1 Instalé D3.js usando npm i d3 . Estoy importando con import * as d3 from "d3" . Usando Node v15.8.0 y React v17.0.2
si solo necesita "importar" desde las funciones de ES6+, simplemente agregue 'type': 'module' en su archivo package.json . De lo contrario, use babel para habilitar todas las funciones de ES6+ para su aplicación.
Desde v12, Next.js tiene soporte nativo para módulos ES. Entonces, si alguien enfrenta este problema, simplemente actualice su versión de Next.js. D3 y otros paquetes que proporcionan solo los puntos de entrada de ESM ahora son totalmente compatibles sin necesidad de transpilarlos.
Referencia: https://nextjs.org/blog/next-12#es-modules-support-and-url-imports
Este soporte fue experimental en Next.js v11.1 y se puede habilitar usando la siguiente configuración:
// next.config.js module.exports = { // Prefer loading of ES Modules over CommonJS experimental: { esmExternals: true } }Referencia: https://nextjs.org/blog/next-11-1#es-modules-support