React项目中使用i18next出现missingKey错误的排查求助

问题描述 #

我在React项目中安装了i18next，因为不需要后端相关功能就移除了对应依赖。之后在public/locales/en/translation.json创建了翻译文件，内容如下：

{"key1": "value1en"}

同时创建src/i18n.js完成初始化配置：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    interpolation: {
      escapeValue: false, // React默认会转义，这里不需要
    }
});
export default i18n;

已在src/index.js中引入该配置文件，但在组件中使用useTranslation()调用t('key1')时，控制台报错：

i18next::translator: missingKey en translation key1 key1

页面仅显示文本key1，请问问题出在哪里？

问题根源 #

你移除了后端依赖，但没有配置任何翻译文件的加载机制——i18next本身不会自动读取public/locales下的JSON文件，必须通过加载器或手动导入的方式让它获取翻译内容。

两种解决方法 #

方法1：重新安装并配置i18next-http-backend #

注意：这个包并非用于对接后端API，而是专门用来加载本地静态翻译文件的工具，适合你的场景。

1. 安装依赖：

npm install i18next-http-backend

2. 修改src/i18n.js，添加backend配置：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend'; // 导入backend模块

i18n
  .use(Backend) // 注册backend加载器
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    interpolation: {
      escapeValue: false,
    },
    // 配置文件读取路径，匹配你的public目录结构
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    }
});
export default i18n;

方法2：手动导入翻译文件（无需额外依赖） #

如果不想安装新包，可以直接把翻译文件导入到配置中：
修改src/i18n.js：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
// 手动导入翻译文件
import enTranslation from '../public/locales/en/translation.json';

i18n
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    interpolation: {
      escapeValue: false,
    },
    // 直接注入翻译内容
    resources: {
      en: {
        translation: enTranslation
      }
    }
});
export default i18n;

验证 #

修改后重启项目，再调用t('key1')即可正常显示value1en。

内容的提问来源于stack exchange，提问作者oderfla