从CRA迁移到Vite后导入第三方SDK文件报错求助

问题原因 #

这个第三方SDK是针对Webpack环境打包的，代码中硬编码了Webpack的全局变量webpackJsonpthirdPartySDK，而Vite默认不提供该变量；同时SDK的UMD/CommonJS包装逻辑在Vite的模块解析规则下无法正常初始化。

解决方案 #

1. 精准配置vite-plugin-commonjs插件

之前使用该插件解决过类似问题，但可能默认配置未命中当前SDK文件，需明确指定转换范围：

• 确保插件已安装：

  npm install @originjs/vite-plugin-commonjs --save-dev
  

• 在vite.config.js中添加精准匹配规则：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  import viteCommonjs from '@originjs/vite-plugin-commonjs';
  
  export default defineConfig({
    plugins: [
      react(),
      viteCommonjs({
        include: [/third-party-sdk\.js$/] // 匹配你的SDK文件名，确保精准命中
      })
    ]
  });
  

2. 手动注入Webpack全局变量

如果SDK依赖webpackJsonpthirdPartySDK变量，可在项目入口文件（如src/main.jsx）开头手动创建该全局变量：

// 提前定义Webpack全局变量，避免SDK初始化报错
window.webpackJsonpthirdPartySDK = window.webpackJsonpthirdPartySDK || [];

// 再导入SDK
import * as thirdPartySDK from '../../../vendor/third-party-sdk';

3. 改用require导入

Vite支持CommonJS的require语法，尝试替换import：

const thirdPartySDK = require('../../../vendor/third-party-sdk');

静态import的解析时机更早，可能触发未初始化的错误，require的动态加载逻辑可能避开该问题。

4. 兜底：全局脚本引入

完全绕开Vite的模块解析，直接在index.html中通过<script>标签引入SDK，模拟Webpack/react-scripts的全局加载方式：

<!-- 在index.html的<head>或<body>中添加 -->
<script src="/vendor/third-party-sdk.js"></script>

之后在代码中通过全局变量访问SDK（通常SDK会挂载到window对象，如window.thirdPartySDK）。

内容的提问来源于stack exchange，提问作者Chris Oppedal