从网址导入json文件

Question

I am doing translations with react-i18next , at the moment everything works as expected as i am importing the translations files locally as below

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { reactI18nextModule } from 'react-i18next';
import translationEN from '!json!../public/locales/en/translation.json'
import translationPT from '!json!../public/locales/pt/translation.json';

// the translations
const resources = {
  en: {
    translation: translationEN
  },
  pt: {
    translation: translationPT
  }
};

i18n
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to the react-i18next components.
  // Alternative use the I18nextProvider: https://react.i18next.com/components/i18nextprovider
  .use(reactI18nextModule)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    resources,
    fallbackLng: 'en',
    ........... Code continues

Now the challenge is , i want to be able to update the translation files , and the implementation i decided to go with is to put the files on Amazon S3 and read them , whenever update is needed i will send the updated json object to the backend service that will update the files .

The problem i am facing is figuring out how to import the files in react project as if i do

import translationEN from 'https:my-s3-url/locales/en/translation.json'
import translationPT from 'https:my-s3-url/locales/en/translation.json'

It gives me an error . Module not found: Error: Cannot resolve module 'https:my-s3-url/locales/en/translation.json' .

Using i18next-xhr-backend plugin also does not work with the below configurations :-

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { reactI18nextModule } from 'react-i18next';


i18n
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to the react-i18next components.
  // Alternative use the I18nextProvider: https://react.i18next.com/components/i18nextprovider
  .use(reactI18nextModule)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
      backend: {
        loadPath: 'https://my-s3-bucket.s3.amazonaws.com/locales/en/translation.json'
      },
    fallbackLng: 'en',
    debug: true,
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },

    // special options for react-i18next
    // learn more: https://react.i18next.com/components/i18next-instance
    react: {
      wait: true,
      nsMode: 'default'
    },
  });

export default i18n;

Any suggestion on the best way to approach this will be highly appreciated , thanks :-)

Answer 1

You need to provide values for interpolation in loadPath field, not just a string. And most likely crossDomain has to be also set to true .

backend: {
  loadPath: 'https://my-s3-bucket.s3.amazonaws.com/locales/{{lng}}/{{ns}}.json',
  crossDomain: true,
},

Link to docs