es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Maneje los cambios de archivo con i18next.

27 Jul, 2023 Programación

Estoy utilizando next.js con i18n y al inicializar mi i18n.js, estoy cargando los archivos con los archivos de traducciones de esta manera:

import { initReactI18next } from "react-i18next";
import i18n from 'i18next';
import {defaultApplicationLocale} from '../application.properties';
var enGB = require('./locales/EN/en-GB.json');
var ptPT = require('./locales/PT/pt-PT.json');
var frFR = require('./locales/PT/frFR.json');

const resources = {
    enGB: {
      translation: enGB
    },
    ptPT: {
      translation: ptPT
    },
    frFR:{
      translation: frFR
    }
  };

i18n
    .use(initReactI18next) 
    .init({
      resources,
      lng: defaultApplicationLocale,
      interpolation: {
        escapeValue: false 
      }
    });

export default i18n

Después importo este i18n ya inicializado y todo funciona bien.
Pero si cambio uno de los archivos de traducción (cambio algún mensaje de ‘hi’ a ‘hello’), no funciona hasta que reinicio todo el proceso. En teoría, i18n proporciona una función para recargar los recursos i18n.reloadResources(), que debería volver a cargar los datos de los archivos, pero no funciona.

¿Qué estoy haciendo mal?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que no estás llamando a la función reloadResources() en el lugar correcto. Según la documentación, esta función debería ser llamada después de que se carguen los nuevos recursos y antes de que se necesiten las traducciones (por ejemplo, antes de renderizar los componentes traducidos).

    En tu implementación actual, solo estás inicializando i18n una vez durante el inicio de la aplicación, por lo que los cambios en los archivos de traducción no se reflejarán hasta que reinicies todo el proceso. Para solucionar esto, podrías crear un módulo separado para observar cambios en los archivos de traducción y llamar a i18n.reloadResources() cuando sea necesario.

    Aquí tienes un ejemplo de cómo podrías implementar esto:

    // i18n.js
import { initReactI18next } from "react-i18next";
import i18n from 'i18next';
import {defaultApplicationLocale} from '../application.properties'

let resources = {};

function initialize() {
  resources = {
    en_GB: {
      translation: require('./locales/EN/en-GB.json')
    },
    pt_PT: {
      translation: require('./locales/PT/pt-PT.json')
    },
    fr_FR:{
      translation: require('./locales/PT/fr_FR.json')
    }
  };

  i18n
    .use(initReactI18next) 
    .init({
      resources,
      lng: defaultApplicationLocale, 
      interpolation: {
        escapeValue: false 
      }
    });
}

function reload() {
  Object.keys(resources).forEach((lng) => {
    const isDefaultLocale = lng === defaultApplicationLocale;
    const file = isDefaultLocale ? `en-GB.json` : `${lng}.json`;
    resources[lng].translation = require(`./locales/${lng}/${file}`);
  });

  i18n.reloadResources();
}

export { initialize, reload };
export default i18n;

    Luego, en el código de inicio de tu aplicación, puedes llamar a initialize() desde i18n.js como antes:

    import i18n from './i18n';

i18n.initialize();

    Finalmente, crea un módulo separado para observar cambios en tus archivos de traducción y llamar a i18n.reload() cuando sea necesario:

    // i18nWatcher.js
import chokidar from 'chokidar';
import { reload } from './i18n';

const watcher = chokidar.watch('./locales/**/*.json', {
  ignored: /(^|[\/\\])\../ // ignora los archivos ocultos
});

watcher.on('change', (path) => {
  console.log(`El archivo de traducción ${path} ha cambiado.`);

  reload();
});

    Con esta configuración, tus traducciones se recargarán automáticamente cada vez que haya un cambio en un archivo de traducción, sin necesidad de reiniciar toda la aplicación.

Comments are closed.