React CRA迁移至Vite后无法导入agora-rtc-sdk-ng求助

问题原因 #

agora-rtc-sdk-ng@4.17.2内部包含针对Electron环境的代码分支，但在浏览器环境下Vite会尝试解析未安装的electron依赖，导致报错。

可行解决办法 #

方法1：配置Vite拦截electron导入请求 #

在项目根目录的vite.config.js中添加以下配置，让Vite不对electron依赖进行实际解析：

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

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        {
          name: 'skip-electron',
          setup(build) {
            // 拦截electron的导入请求
            build.onResolve({ filter: /^electron$/ }, () => ({
              path: 'electron',
              namespace: 'empty-ns'
            }));
            // 返回空模块内容
            build.onLoad({ filter: /.*/, namespace: 'empty-ns' }, () => ({
              contents: 'export default {}'
            }));
          }
        }
      ]
    }
  }
});

方法2：通过别名映射空模块 #

先安装empty-module包：

npm install empty-module --save-dev

然后修改vite.config.js：

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      electron: 'empty-module'
    }
  }
});

方法3：升级Agora SDK版本 #

旧版本SDK可能存在Vite兼容问题，尝试升级到最新4.x稳定版：

npm update agora-rtc-sdk-ng

升级后重启Vite服务，检查报错是否消失。

方法4：确认导入方式正确 #

确保代码中从SDK主包导入，而非直接引用内部编译文件：

// 正确导入
import AgoraRTC from 'agora-rtc-sdk-ng';

// 错误导入（需避免）
import AgoraRTC from 'agora-rtc-sdk-ng/AgoraRTC_N-production.js';

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