Accented characters from json files do not render (�) when imported into a js file via webpack for i18n

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

        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:

                test: /\.(js$|jsx)/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                            ['@babel/preset-env', '@babel/preset-react']
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
    resolve: {
        extensions: ['*', '.js', '.jsx'],
        alias: {
            react: path.resolve('./node_modules/react')
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum