react-i18next not loading json translation files in React app created with create-react-app

I'm not sure where you put the locale files, but I see two issues:

  1. You have specified a relative URL so you load /kiosk/parents/locales rather than /locales. You need to add a slash at the beginning of the load path.

  2. For Create React App to serve static files, you need to put them into the public folder. This is described in its User Guide in more detail. So make sure locales is inside the public folder in the project root.

Hope this helps!


Just in case anyone needs this like I did:

If you happen to have changed your homepage path in your package.json file like so:

...
    "homepage": "/tom/",
...

you also need to add this part to i18n like so:

i18n
    .use(XHR)
    .use(LanguageDetector)
    .init({
      debug: true,
      lng: 'en',
      nsSeparator: false,
      keySeparator: false,
      fallbackLng: false,
      backend: {
        loadPath: '/tom/locales/{{lng}}/{{ns}}.json'
      }
    });


export default i18n;