Following the i18n documentation, I've setup json files within the local directory with translations for English and Spanish. I'm able to render these values correctly, with the correct text appearing from the json files, so I know they are being imported. The problem occurs for accented and foreign characters, i.e. 'à, ñ, ö', etc. Which are not being read from the json file, and are appearing as "�".

The issue seems to be independent of any charset values I attribute to the html, and seems to be a problem at the point of importing the json into the file, handled by the webpack compiler. I cannot find a solution for defining charset for json files through webpack.

Within i18n.js config: (Note: I have tried import and require for accessing the 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;

My webpack configuration properties of interest are:

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')
        }
    },