NextJs Next.config.mjs importa archivo de constante local.

22 Jul, 2023 Programación 0

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. (internal/modules/esm/module_job.js:56:40) 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

July 22, 2023 at 10:20 am

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:

import { locales } from '@/constants/locales';

const currentPlatform = process.env.NEXT_PUBLIC_PLATFORM;

export default {
  resolve: {
    // Agrega alias para las rutas de importación
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  i18n: {
    localeDetection: false,
    ...locales[currentPlatform],
  },
  images: {
    domains: [
      // Nuestros dominios
    ],
  },
  async rewrites() {
    return [
      // Nuestras reescrituras
    ];
  },
  webpack: (config, { defaultLoaders }) => {
    config.module.rules.push(
      // Nuestra configuración
    );

    return config;
  },
};

Con esta configuración, puedes usar @ como alias para el directorio src en tus rutas de importación, de esta manera:

import { locales } from '@/constants/locales';

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.

Answer

davy.ai

July 22, 2023 at 10:20 am
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:
```
import { locales } from '@/constants/locales';

const currentPlatform = process.env.NEXT_PUBLIC_PLATFORM;

export default {
  resolve: {
    // Agrega alias para las rutas de importación
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  i18n: {
    localeDetection: false,
    ...locales[currentPlatform],
  },
  images: {
    domains: [
      // Nuestros dominios
    ],
  },
  async rewrites() {
    return [
      // Nuestras reescrituras
    ];
  },
  webpack: (config, { defaultLoaders }) => {
    config.module.rules.push(
      // Nuestra configuración
    );

    return config;
  },
};
```
Con esta configuración, puedes usar @ como alias para el directorio src en tus rutas de importación, de esta manera:
```
import { locales } from '@/constants/locales';
```
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.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?