Siguiendo la documentación de i18n, configuré archivos json dentro del directorio local con traducciones para inglés y español. Puedo representar estos valores correctamente, con el texto correcto que aparece en los archivos json, por lo que sé que se están importando. El problema ocurre con los caracteres acentuados y extranjeros, es decir, 'à, ñ, ö', etc., que no se leen del archivo json y aparecen como "�".

El problema parece ser independiente de cualquier valor de conjunto de caracteres que atribuyo al html, y parece ser un problema en el momento de importar el json al archivo, manejado por el compilador del paquete web. No puedo encontrar una solución para definir charset para archivos json a través de webpack.

Dentro de la configuración de i18n.js: (Nota: he intentado importar y requerir para acceder a json.

 const glossaryTranslationEN = require("../public/locales/en/glossary.json"); const glossaryTranslationES = require("../public/locales/es/glossary.json"); const validationTranslationEN = require("../public/locales/en/validation.json"); const validationTranslationES = require("../public/locales/es/validation.json"); const resources = { en: { glossary: glossaryTranslationEN, validation: validationTranslationEN }, es: { glossary: glossaryTranslationES, validation: validationTranslationES } }; i18n .use(Backend) .use(initReactI18next) .init({ resources, ns: Object.keys(resources.en), lng: "es", fallbackLng: "en", debug: true, defaultNS: "glossary", interpolation: { escapeValue: false, }, useSuspense: true }); export default i18n;

Las propiedades de configuración de mi paquete web de interés son:

 module: { rules: [{ test: /\.(js$|jsx)/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { 'presets': ['@babel/preset-env', '@babel/preset-react'] } } }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }] }, resolve: { extensions: ['*', '.js', '.jsx'], alias: { react: path.resolve('./node_modules/react') } },