Unable to use JSON from S3 buck in i18next

Question

This is how my i18n file looks like -

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import HttpApi from 'i18next-http-backend';

i18n
  .use(HttpApi)
  .use(initReactI18next)
  .init({
    // resources: resourcesObj,
    initImmediate: false,
    backend: {
      loadPath: 'https://bucketlink.amazonaws.com/locales/{{lng}}/{{ns}}.json',
      crossDomain: true,
      allowMultiLoading: true,
    },
    lng: "en",
    fallbackLng: "en",
    debug: false,
    ns: ["translations"],
    defaultNS: "translations",
    keySeparator: false,
    interpolation: {
      escapeValue: true
    }
  });

export default i18n;

When I change the language I see i my Network tab that the JSON is coming from S3 properly. Though, the key is being displayed instead of values in all my screen. Can someone let me know why my translation values are not displaying.

Note -- If I use resources and put my json object inside of it, it works as expected.

Answer 1

From the demo that you've posted, the problem is that your json files (the ones that are stored in s3) are not in the right format.

You need to split the json file by lang & namespace (translations in your case), and the json files must contain only the keys that are relevant to the lang & namespace.

For example, your folder should look like:

└── locales
    ├── en
    │   └── translations.json
    └── he
        └── translations.json

and each translation.json file should contain:

{ 
  "Overview": "Overview",
  "TaskList": "Task List"
}

PS, your translation files can be a nested object, then you will need to specify the key with a dot notation (something like a.b.c)