在Netlify部署Vite-React应用时遇白屏及require未定义错误求助

排查与修复步骤 #

1. 恢复"type":"module"配置 #

移除这个配置只会打乱Node的模块解析逻辑，Vite项目默认遵循ES模块规范，先把package.json里的这个配置加回去，别再折腾它。

2. 调整Vite构建配置 #

• 确认vite.config.js（或.ts）的输出目录是dist（Vite默认值），如果自定义了输出目录，必须在Netlify部署设置里把发布目录改成对应路径，比如build。
• 给Vite添加CommonJS兼容配置，很多第三方依赖是CommonJS格式，未正确转换会触发require错误：

export default {
  optimizeDeps: {
    esbuildOptions: {
      target: 'es2020',
    },
  },
  build: {
    target: 'es2020',
  },
}

3. 修正Netlify构建命令 #

去Netlify部署设置里，把构建命令改成npm run build（用yarn就写yarn build，pnpm同理），别用平台自动生成的错误命令。

4. 清除缓存重新部署 #

Netlify的旧缓存可能导致异常，去部署详情页点击「清除缓存并重新部署」，让平台从头构建产物。

5. 核对环境变量 #

如果项目用到了Vite环境变量（前缀VITE_），确保Netlify里配置了完全一致的变量，缺失变量可能导致构建出的代码异常，进而引发白屏。

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