如何从打包后的组件中访问同一I18nContext？

下面是同场景下开发者实测有效的解决方案：

1. 把i18n相关依赖设为peerDependencies #

组件库不要把i18next、react-i18next打包进产物，而是声明为peer依赖，让宿主项目提供统一的实例，避免多实例导致上下文丢失。

• 修改组件库的package.json：

{
  "peerDependencies": {
    "i18next": "^22.0.0",
    "react-i18next": "^12.0.0",
    "react": "^18.0.0"
  },
  "devDependencies": {
    "i18next": "^22.0.0",
    "react-i18next": "^12.0.0"
  }
}

2. 修正Vite的external配置 #

确保组件库的Vite配置中，i18n相关依赖的external和全局变量映射正确：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'MyUIComponent',
      formats: ['es', 'umd']
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'i18next', 'react-i18next'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          i18next: 'i18next',
          'react-i18next': 'reactI18next'
        }
      }
    }
  }
});

3. 组件库不自行初始化i18n实例 #

组件库只负责调用翻译钩子，i18n的初始化和Provider包裹完全交给宿主项目：

// 宿主项目根组件
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n-config'; // 宿主自定义的i18n配置
import { MyComponent } from 'your-ui-library';

function App() {
  return (
    <I18nextProvider i18n={i18n}>
      <MyComponent />
    </I18nextProvider>
  );
}

组件库内的子组件直接使用useTranslation即可：

// 组件库中的子组件
import { useTranslation } from 'react-i18next';

export function MyComponent() {
  const { t, i18n } = useTranslation();
  return <div>{t('hello')}</div>;
}

4. 排查并修复重复依赖问题 #

如果宿主项目和组件库存在重复的i18n依赖，会导致多实例冲突。执行以下命令检查：

npm ls i18next

若发现重复依赖，在宿主项目的package.json中强制统一版本：

{
  "overrides": {
    "i18next": "^22.0.0",
    "react-i18next": "^12.0.0"
  }
}

5. 备选：使用withTranslation高阶组件 #

若useTranslation钩子仍有问题，可尝试用高阶组件包裹组件，解决上下文传递异常：

import { withTranslation } from 'react-i18next';

function MyComponent({ t, i18n }) {
  return <div>{t('hello')}</div>;
}

export default withTranslation()(MyComponent);

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