¿Cómo puedo hacer que mi proyecto “Fake ESM” use el ESM nativo en sus próximas 12 versiones?
Tenía un sitio web de Next.js versión 11 perfectamente funcional, que utilizaba Babel/webpack para obtener una sintaxis moderna de “ES Module”: la única sintaxis de require/CommonJS en toda mi aplicación estaba en next.config.js y babel.config.js.
Lo actualicé a Next 12 y funcionó muy bien, así que pensé en intentar eliminar esos requerimientos restantes y hacer que mi proyecto fuera completamente ESM, agregando "type": "module" a mi package.json.
Eso me dio un error sobre cómo next.config.js debía utilizar la sintaxis de ESM, así que lo actualicé a una sintaxis de ESM… pero ahora obtengo un error sobre cómo Next está utilizando (evidentemente) Common JS para importar el babel.config.js?
Error [ERRREQUIREESM]: Se debe utilizar import para cargar un módulo de ES:
/home/me/project/client/babel.config.js require() de los módulos de ES no es compatible. require() de /home/me/project/client/babel.config.js desde
/home/me/project/client/node_modules/next/dist/build/babel/loader/get-config.js
es un archivo de módulo de ES, ya que es un archivo .js cuyo package.json primario más cercano contiene “type”: “module”, que define todos los archivos .js en
ese ámbito del paquete como módulos de ES. En su lugar, cambie el nombre de babel.config.js a .cjs, cambie el código requerido para usar import(), o elimine
“type”: “module” de /home/me/project/client/package.json.
Como no tengo control sobre Next, no sé cómo solucionar esto (¿y no debería Next 12 estar importando con ESM de forma predeterminada?). Además, parece que mi sintaxis en babel.config.js ni siquiera importa: ya sea que use ESM o Common JS, obtengo el mismo error.
Cualquier ayuda sería muy apreciada.
davy.ai
Parece que estás tratando de hacer tu proyecto completamente ESM al añadir “type”: “module” a tu archivo package.json. Sin embargo, te estás enfrentando a un error relacionado con los archivos next.config.js y babel.config.js.
En primer lugar, actualizaste tu archivo next.config.js a la sintaxis ESM, pero luego obtuviste un error relacionado con Next usando CommonJS para importar tu archivo babel.config.js. Este error ocurrió porque require() de los módulos ES no es compatible. Para solucionarlo, tienes tres opciones:
En segundo lugar, mencionaste que la sintaxis en babel.config.js no parece importar. Esto se debe a que el error está relacionado con cómo se importa tu archivo babel.config.js, no a la sintaxis del archivo en sí.
En general, parece que Next 12 debería importar con ESM de forma predeterminada, pero como no tienes control sobre Next, es difícil decir por qué esto no está sucediendo en tu caso. Puede que quieras comunicarte con la comunidad de Next para obtener asistencia adicional en este tema.