Unable to use JSON from S3 buck in i18next

早过忘川 提交于 2021-01-29 12:32:54

问题


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.


回答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)



来源:https://stackoverflow.com/questions/64109729/unable-to-use-json-from-s3-buck-in-i18next

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!