迁移至Craco并升级react-scripts后i18next出现i18n.use报错

问题原因分析 #

你遇到的问题主要来自两个核心点：

1. 模块导入方式混用：同时使用require和import导入i18next，导致拿到的模块实例不符合预期；
2. Craco别名冲突：你的别名配置会把src目录下的所有文件/目录都设为别名，其中i18next.js文件的别名会覆盖node_modules里的i18next包，导致你实际导入的是自己的文件而非官方库。

解决方案 #

1. 统一模块导入方式 #

把i18next的导入从require改为import，确保拿到正确的库实例：

// src/i18next.js
// 注释掉原来的require导入
// const i18n = require('i18next'); 
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

// 后续代码保持不变
const languages = ['eng','spa','fra','por','rus','ara','per','hin','cht','jpn','chi'];

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'eng',
    debug: false,
    whitelist: languages,
    interpolation: {
      escapeValue: false,
    }
  });

export default i18n;

2. 修改Craco别名配置，避免覆盖第三方包 #

有两种优化方式，选其一即可：

方式一：跳过特定冲突文件

直接在别名生成时排除你的i18next.js文件：

/* craco.config.js */
const path = require(`path`);
const fs = require('fs');
const webpack = require('webpack');
const srcDir = path.resolve(__dirname, 'src');
const filenames = fs.readdirSync(srcDir);

module.exports = {
  webpack: {
    alias: filenames.reduce((acc, curr) => {
      // 跳过i18next.js，防止覆盖第三方库
      if (curr === 'i18next.js') {
        return acc;
      }
      const name = path.parse(curr).name;
      acc[name] = path.resolve(srcDir, curr);
      return acc;
    }, {}),
  },
};

方式二：仅为目录创建别名（更通用）

只给src下的目录设置别名，跳过所有文件，从根源避免和第三方包重名的问题：

/* craco.config.js */
const path = require(`path`);
const fs = require('fs');
const webpack = require('webpack');
const srcDir = path.resolve(__dirname, 'src');
const filenames = fs.readdirSync(srcDir);

module.exports = {
  webpack: {
    alias: filenames.reduce((acc, curr) => {
      const fullPath = path.resolve(srcDir, curr);
      // 仅为目录创建别名
      if (fs.statSync(fullPath).isDirectory()) {
        acc[curr] = fullPath;
      }
      return acc;
    }, {}),
  },
};

验证 #

修改完成后，重启开发服务器，i18next的use方法应该能正常调用，不再报错。

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