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

【问题标题】：i18n missingKey issue while using i18n instance使用 i18n 实例时出现 i18n missingKey 问题
【发布时间】：2020-08-03 04:15:55
【问题描述】：

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

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')
};

【问题讨论】：

标签： reactjs internationalization i18next

【解决方案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

【讨论】：