React CRA项目导入AzureClient时出现EventEmitter导出错误

解决CRA React项目中导入AzureClient时的EventEmitter导出错误 #

问题原因

@fluid-internal/client-utils模块中的代码尝试以命名导出方式导入EventEmitter，但Node.js的events模块在浏览器环境下（CRA默认webpack配置）仅提供默认导出，导致编译冲突。

解决方案

1. 使用Craco修改Webpack配置（推荐）

CRA默认不允许直接修改webpack配置，借助craco可以无痛调整：

• 安装依赖：

npm install @craco/craco --save-dev

• 在项目根目录创建craco.config.js，添加如下配置：

module.exports = {
  webpack: {
    configure: (config) => {
      // 为@fluid-internal/client-utils添加babel转译，处理导出兼容性
      config.module.rules.push({
        test: /\.js$/,
        include: /@fluid-internal\/client-utils/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              '@babel/plugin-transform-modules-commonjs',
              '@babel/plugin-proposal-export-namespace-from'
            ]
          }
        }
      });
      return config;
    }
  }
};

• 修改package.json中的启动脚本，替换为craco命令：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

• 重启项目，重新编译。

2. 临时兼容方案（不推荐用于生产）

如果不想修改webpack配置，可以手动调整导入逻辑：

// 替换原有的EventEmitter命名导入
import EventEmitter from 'events';
// 手动提取命名导出
const TypedEventEmitter = EventEmitter;

注意：直接修改node_modules内的文件会被重装覆盖，仅作为临时测试用。

3. 检查依赖版本兼容性

尝试升级或降级@fluidframework/azure-client到稳定兼容版本，比如：

npm install @fluidframework/azure-client@1.3.0

可以参考Fluid Framework官方版本矩阵，确保所有相关依赖版本匹配。

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