使用i18n实例时出现i18n missingKey问题

Question

我正在尝试将i18next集成到我的项目中。我已经创建了一个实例并进行了配置。但是当我构建我的项目时，我得到了missingKey错误，其中它们不在React组件中，这意味着使用i18n实例调用函数t。

i18next配置：

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

import englishTranslation from './translations/messages-en.json';
import turkishTranslation from './translations/messages-tr.json';
import arabicTranslation from './translations/messages-ar.json';

const detectorOptions = {
  // order and from where user language should be detected
  order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],

  // keys or params to lookup language from
  lookupQuerystring: 'lang',
  lookupCookie: 'i18next',
  lookupLocalStorage: 'i18nextLng',
  lookupFromPathIndex: 0,
  lookupFromSubdomainIndex: 0,

  // cache user language on
  caches: ['localStorage', 'cookie'],
  excludeCacheFor: ['cimode'], // languages to not persist (cookie, localStorage)

  // optional expire and domain for set cookie
  // cookieMinutes: 10,
  // cookieDomain: 'myDomain',

  // optional htmlTag with lang attribute, the default is:
  htmlTag: document.documentElement,

  // only detect languages that are in the whitelist
  checkWhitelist: true,
  // optional set cookie options, reference:[MDN Set-Cookie docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie)
  cookieOptions: { path: '/' },
};

const languageDetector = new LanguageDetector();
languageDetector.init(detectorOptions);

i18n
  .use(initReactI18next)
  .use(languageDetector)
  .init({
    lng: 'en',
    debug: true,
    resources: {
      en: englishTranslation,
      tr: turkishTranslation,
      ar: arabicTranslation,
    },
    interpolation: {
      escapeValue: false,
    },
    fallbackLng: 'en',
    whitelist: ['en', 'tr', 'ar'],
  });

i18n.on('languageChanged', language => i18n.reloadResources()
  .then(() => console.log('Language changed to: ', language)));

export default i18n;

控制台错误：

i18next::translator: missingKey en translation systemPreparation systemPreparation
index.js:1 i18next::translator: missingKey en translation letsStart letsStart
index.js:1 i18next::translator: missingKey en translation infoAndApproval infoAndApproval
index.js:1 i18next::translator: missingKey en translation nextStep nextStep
...

它是这样的。

我称之为i18n实例的Javascript文件：

import i18n from '../../../i18n';

export const property = {
  text: i18n.t('videoRecording')
};

Answer 1

messages-en.json文件中缺少'videoRecording‘密钥。还需要检查messages-en.json文件是否具有正确的格式，格式应如下所示：

{
   "videoRecording": "some translation"
}

我建议你使用一些工具来处理这种情况。

下面是我的配置示例

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

const projectToken = "5e13e3019cff4dc6abe36009445f0883";
const loadPath = `https://cdn.simplelocalize.io/${projectToken}/_latest/i18next/{{lng}}/{{ns}}/_index`;

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use (initReactI18next)
  .init({
    // default/fallback language 
    fallbackLng: 'en',
    ns: ["default"],
    defaultNS: "default",
    //detects and caches a cookie from the language provided
    detection: {
      order: ['queryString', 'cookie'],
      cache: ['cookie']
    },
    interpolation: {
      escapeValue: false
    },
    backend: {
      loadPath
    }
  })

export default i18n;

完整项目代码：https://github.com/simplelocalize/simplelocalize-i18next