从CRA迁移至Vite后GitHub Actions部署报错求助

以下是针对该报错的排查和解决步骤：

• 对齐Node.js版本
  本地构建正常但CI失败，首先确认GitHub Actions中使用的Node.js版本和本地一致。在工作流配置文件（如.github/workflows/deploy.yml）中明确指定Node版本：

  - name: Set up Node.js
    uses: actions/setup-node@v4
    with:
      node-version: '18' # 替换为你本地使用的版本
      cache: 'npm'
  

• 清理并重新安装依赖
  CI环境可能缓存了旧的依赖文件，导致构建冲突。在构建前添加清理步骤：

  - name: Clean dependencies
    run: |
      rm -rf node_modules package-lock.json
      npm install
  

• 调整Vite的依赖优化配置
  某些依赖可能被不当外部化，导致虚拟模块加载失败。修改vite.config.js，强制预构建可疑依赖：

  import react from '@vitejs/plugin-react';
  import { defineConfig } from 'vite';
  import jsconfigPaths from 'vite-jsconfig-paths';
  import eslintPlugin from 'vite-plugin-eslint';
  
  export default defineConfig({
      build: {
          outDir: 'build',
          sourcemap: true,
          rollupOptions: {
              external: [], // 确保此处没有错误添加需要打包的依赖
          },
      },
      optimizeDeps: {
          include: ['你的依赖名'], // 替换为可能有问题的第三方库
      },
      plugins: [react(), jsconfigPaths(), eslintPlugin()],
      server: {
          open: true,
          port: 3000,
      },
  });
  

• 检查构建命令与工作目录
  确保GitHub Actions中执行的构建命令正确，且工作目录指向项目根：

  - name: Build project
    working-directory: ./
    run: npm run build
  

• 更新Vite及插件版本
  旧版本的Vite或相关插件可能存在CI环境下的bug，更新到最新稳定版：

  npm update vite @vitejs/plugin-react vite-jsconfig-paths vite-plugin-eslint
  

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