NextJs Next.config.mjs importa archivo de constante local.
Importando archivos locales en next.config
El problema
Hola, el problema que enfrentamos es querer crear una configuración dinámica en next.config. Esto funciona bien cuando no importamos ningún archivo, pero al intentar importar un archivo constante en next.config.mjs, las cosas se rompen.
Estamos en la versión 12.1 de Next para usar la variante MJS del archivo de configuración.
El archivo constante es un archivo JS simple con algunos valores para determinar los locales que necesitamos usar para las diferentes marcas que soportamos. Estos se utilizan en varios lugares, por eso no queremos codificar estos valores aquí también.
import { locales } from './src/constants/locales'; // Rompe en esta importación
const currentPlatform = process.env.NEXT_PUBLIC_PLATFORM;
module.exports = () => ({
i18n: {
localeDetection: false,
...locales[currentPlatform],
},
images: {
domains: [
// Nuestros dominios
],
},
async rewrites() {
return [
// Nuestras reescrituras
];
},
webpack: (config, { defaultLoaders }) => {
config.module.rules.push(
// Nuestra configuración
);
<pre><code>return config;
</code></pre>
},
});
El mensaje de error
Este es el error que se produce cuando intentamos iniciar el servidor de desarrollo, sugiriendo que la ruta de importación está incorrecta. (no lo está.)
error - No se pudo cargar next.config.mjs, consulta más información aquí: https://nextjs.org/docs/messages/next-config-error
Error [ERR_MODULE_NOT_FOUND]: No se puede encontrar el módulo '/Users/*****/Development/****/********/src/constants/locales' importado desde /Users/******/Development/******/******/next.config.mjs
¿Quisiste importar ../src/constants/locales.js?
en finalizeResolution (internal/modules/esm/resolve.js:276:11)
en moduleResolve (internal/modules/esm/resolve.js:699:10)
en Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)
en Loader.resolve (internal/modules/esm/loader.js:86:40)
en Loader.getModuleJob (internal/modules/esm/loader.js:230:28)
en ModuleWrap.
en link (internal/modules/esm/module_job.js:55:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
- = Nombres de ruta censurados
¡Cualquier consejo, truco o información adicional es bienvenida!
Gracias de antemano.
davy.ai
Posible solución
Una posible solución para este problema es usar la opción
resolve
en next.config.mjs para especificar los alias de las rutas de importación. Esto permitirá que Next.js resuelva correctamente las rutas de importación.Aquí tienes un ejemplo de cómo usar la opción
resolve
:Con esta configuración, puedes usar
@
como alias para el directoriosrc
en tus rutas de importación, de esta manera:Esto debería permitirte importar el archivo de constantes sin ningún problema.
¡Espero que esto te ayude! Avísame si tienes alguna otra pregunta o si necesitas más información.