React项目迁移Vite后执行vite build时@aws-amplify依赖报错求助

问题分析 #

该错误源自@aws-amplify/pubsub依赖的paho-mqtt.js文件中，global变量未在浏览器环境下正确定义，同时Vite的CommonJS解析器处理该文件的自执行函数时出现兼容问题。开发阶段正常是因为Vite开发服务器有特殊兼容逻辑，而生产构建的解析规则更严格。

解决方案 #

1. 修正Vite配置中的global定义与依赖预构建 #

调整vite.config.js，将global映射到浏览器的window对象，并强制预构建相关依赖，确保生产构建时正确解析：

// vite.config.js
export default {
  define: {
    global: 'window', // 替换原有的'({})'
  },
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
  // 强制预构建@aws-amplify相关依赖
  optimizeDeps: {
    include: ['@aws-amplify/pubsub', '@aws-amplify/core'],
    esbuildOptions: {
      define: {
        global: 'window',
      },
    },
  },
  // 生产构建时指定需处理的CommonJS文件范围
  build: {
    commonjsOptions: {
      include: [/node_modules\/@aws-amplify/, /node_modules\/paho-mqtt/],
    },
  },
};

2. 简化index.html中的global初始化脚本 #

保留核心逻辑，确保在模块加载前完成global变量的定义：

<script>
  if (typeof global === 'undefined') {
    window.global = window;
  }
</script>
<script type="module" src="/src/index.tsx"></script>

3. 升级@aws-amplify到最新稳定版 #

旧版本的AWS Amplify可能存在Vite兼容缺陷，执行以下命令升级依赖：

npm update @aws-amplify/core @aws-amplify/pubsub
# 或使用yarn
yarn upgrade @aws-amplify/core @aws-amplify/pubsub

验证步骤 #

1. 删除node_modules目录和package-lock.json（或yarn.lock）
2. 重新安装依赖：npm install
3. 执行生产构建：npm run build

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