react-i18next: When the key exists in en.json I get this error -> i18next::translator: missingKey en translation

I am getting a lot of these errors:

i18next::translator: missingKey en translation

screenshot from my console:

This is one of the objects in /locales/en.json that shows those keys are not missing.

  "template-manager": {
    "desktop-button": "Desktop",
    "header": "Custom Order Forms",
    "header-button": "New Order Form Template",
    "mobile-button": "Mobile",
    "preview-button": "Preview",
    "redo-button": "Redo",
    "tablet-button": "Tablet",
    "toggle-device-Frame": "Toggle Device Frame",
    "undo-button": "Undo"
  }

This error isn't happening on all of the keys, just some of them.

We are using a script that adds all of the keys for us where the text for i18n is wrapped in a <trans> tag:

"updateLanguageKeys": "rm -rf public/locales/en.json && npx babel -f .babelrc 'src/**/*.{js,jsx}'",

contents of .babelrc:

{
    "presets": [
        "@babel/preset-env",
        [
            "@babel/preset-react",
            {
                "runtime": "automatic"
            }
        ]
    ],
    "plugins": [
        [
            "i18next-extract",
            {
                "discardOldKeys": true,
                "outputPath": "public/locales/{{locale}}.json"
            }
        ],
        ["@babel/proposal-class-properties", { "loose": true }],
        ["@babel/proposal-private-methods", { "loose": true }],
        ["@babel/proposal-private-property-in-object", { "loose": true }],
        ["@babel/proposal-object-rest-spread", { "loose": true }]
    ]
}

Here are the settings:

i18n.use(detector)
    .use(backend)
    .use(initReactI18next) // passes i18n down to react-i18next
    .init({
        returnEmptyString: false,
        backend: { loadPath: process.env.LOCALES_PATH },
        whitelist: ['en', 'de', 'es', 'fr', 'it', 'pt'],
        fallbackLng: 'en', // use en if detected lng is not available
        debug: true, // Use this to see what's going on in console
        react: {
            useSuspense: false
        },
        interpolation: {
            escapeValue: false // react already safes from xss
        }
    })

Solution

It turned out to be an issue with the environment variable in this.

Environment variables in a React app have to be prepended with REACT_APP so It needed to be changed to process.env.REACT_APP_LOCALES_PATH

i18n.use(detector)
    .use(backend)
    .use(initReactI18next) // passes i18n down to react-i18next
    .init({
        returnEmptyString: false,
        backend: { loadPath: process.env.REACT_APP_LOCALES_PATH }, // <--right there
        whitelist: ['en', 'de', 'es', 'fr', 'it', 'pt'],
        fallbackLng: 'en', // use en if detected lng is not available
        debug: true, // Use this to see what's going on in console
        react: {
            useSuspense: false
        },
        interpolation: {
            escapeValue: false // react already safes from xss
        }
    })