react-i18next调用addResourceBundle报错及重复初始化问题问询

根因说明 #

• 模块配置加载时序早于全局i18n.tsx的初始化进度，直接调用未初始化的i18next实例的addResourceBundle方法才会报类型错误
• 你手动新增的i18next.init语句触发了重复初始化，才会出现官方警告，同时新的init配置会覆盖之前已经加载的用户语言设置，导致语言重置

具体修改步骤 #

1. 删掉模块配置文件里的i18next.init({ resources: {} });语句，全程只保留i18n.tsx里的一次init调用即可
2. 模块配置文件不要直接导入默认的i18next实例，改为导入你已经完成初始化配置的全局实例，示例修改如下：

// 把原来的import i18next from 'i18next'改成下面的路径，对应你项目里i18n.tsx的真实相对路径
import i18n from '../路径到你的i18n.tsx';
import { lazy } from 'react';
import en from '../../i18n/dashboard/en';
import si from '../../i18n/dashboard/si';
import ta from '../../i18n/dashboard/ta';

// 新增初始化状态判断，避免时序问题
if (i18n.isInitialized) {
  i18n.addResourceBundle('en', 'dashboard', en);
  i18n.addResourceBundle('si', 'dashboard', si);
  i18n.addResourceBundle('ta', 'dashboard', ta);
} else {
  // 实例未初始化时，监听初始化完成事件后再添加资源包
  i18n.on('initialized', () => {
    i18n.addResourceBundle('en', 'dashboard', en);
    i18n.addResourceBundle('si', 'dashboard', si);
    i18n.addResourceBundle('ta', 'dashboard', ta);
  });
}

// 后面的DashboardConfig逻辑保持不变即可
const DashboardConfig = {
  settings: {
    layout: {
        mode : 'default'
    }
  },
  routes: [
    {
        path: '/dashboard',
        component: lazy(() => import('./Dashboard')),
        auth    : ['admin', 'user', 'DASHBOARD_VIEW'],
    }
  ]
};

3. 检查项目入口文件（一般是main.tsx/index.tsx），确保i18n.tsx的导入语句在所有业务模块/路由导入之前，保证全局i18n实例优先初始化完成。

效果验证 #

修改后不会再出现addResourceBundle is not a function的报错，也不会触发重复初始化的警告，用户之前选择的语言配置不会被重置。

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