react-i18next：当密钥存在于 en.json 中时，我收到此错误 -> i18next::translator: missingKey en translation答案

【问题标题】：react-i18next: When the key exists in en.json I get this error -> i18next::translator: missingKey en translationreact-i18next：当密钥存在于 en.json 中时，我收到此错误 -> i18next::translator: missingKey en translation
【发布时间】：2021-09-17 22:05:32
【问题描述】：

我收到很多这样的错误：

i18next::translator: missingKey en translation

我的控制台截图：

这是/locales/en.json 中的对象之一，表明这些键没有丢失。

  "template-manager": {
    "desktop-button": "Desktop",
    "header": "Custom Order Forms",
    "header-button": "New Order Form Template",
    "mobile-button": "Mobile",
    "preview-button": "Preview",
    "redo-button": "Redo",
    "tablet-button": "Tablet",
    "toggle-device-Frame": "Toggle Device Frame",
    "undo-button": "Undo"
  }

此错误并非发生在所有键上，只是其中一些键。

我们正在使用一个脚本来为我们添加所有键，其中 i18n 的文本包含在 <trans> 标记中：

"updateLanguageKeys": "rm -rf public/locales/en.json && npx babel -f .babelrc 'src/**/*.{js,jsx}'",

.babelrc 的内容：

{
    "presets": [
        "@babel/preset-env",
        [
            "@babel/preset-react",
            {
                "runtime": "automatic"
            }
        ]
    ],
    "plugins": [
        [
            "i18next-extract",
            {
                "discardOldKeys": true,
                "outputPath": "public/locales/{{locale}}.json"
            }
        ],
        ["@babel/proposal-class-properties", { "loose": true }],
        ["@babel/proposal-private-methods", { "loose": true }],
        ["@babel/proposal-private-property-in-object", { "loose": true }],
        ["@babel/proposal-object-rest-spread", { "loose": true }]
    ]
}

以下是设置：

i18n.use(detector)
    .use(backend)
    .use(initReactI18next) // passes i18n down to react-i18next
    .init({
        returnEmptyString: false,
        backend: { loadPath: process.env.LOCALES_PATH },
        whitelist: ['en', 'de', 'es', 'fr', 'it', 'pt'],
        fallbackLng: 'en', // use en if detected lng is not available
        debug: true, // Use this to see what's going on in console
        react: {
            useSuspense: false
        },
        interpolation: {
            escapeValue: false // react already safes from xss
        }
    })

【问题讨论】：

它是否发生在带有 - 键的键上？喜欢redo-button
在我的项目中，我使用的是骆驼案，而不是像 redoButton 这样的破折号。
@SanishJoseph 这是个好主意。我尝试改成驼峰式，结果还是一样。

标签： i18next react-i18next

【解决方案1】：

原来是这个环境变量的问题。

React 应用程序中的环境变量必须以REACT_APP 开头，因此需要将其更改为process.env.REACT_APP_LOCALES_PATH

i18n.use(detector)
    .use(backend)
    .use(initReactI18next) // passes i18n down to react-i18next
    .init({
        returnEmptyString: false,
        backend: { loadPath: process.env.REACT_APP_LOCALES_PATH }, // <--right there
        whitelist: ['en', 'de', 'es', 'fr', 'it', 'pt'],
        fallbackLng: 'en', // use en if detected lng is not available
        debug: true, // Use this to see what's going on in console
        react: {
            useSuspense: false
        },
        interpolation: {
            escapeValue: false // react already safes from xss
        }
    })

【讨论】：