React应用仅在Netlify部署时莫名出现只读错误问题咨询

该报错为生产构建环境缺少Node.js全局变量process的polyfill导致，本地开发服务器默认会注入该全局变量，因此不会触发报错，仅在Netlify生产打包后出现。

针对不同构建工具的修复方案 #

Vite项目 #

• 在vite.config.js/vite.config.ts中添加define配置注入占位：

export default defineConfig({
  // 其余原有配置保留
  define: {
    'process.env': {}
  }
})

• 若业务代码确实需要使用环境变量，将所有process.env.XXX的写法替换为Vite规范的import.meta.env.XXX，同时将.env文件中的对应变量添加VITE_前缀。

Webpack/Create React App项目 #

• 先安装process polyfill：npm i process -D
• 在webpack配置中添加全局注入规则：

const webpack = require('webpack')
module.exports = {
  // 其余原有配置保留
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser'
    })
  ]
}

• 未eject的CRA项目可通过react-app-rewired修改配置，也可以直接将process.env相关调用替换为带REACT_APP_前缀的官方规范环境变量调用。

通用排查项 #

• 确认Netlify控制台配置的构建命令和本地生产打包命令完全一致，不要出现本地用dev服务测试、Netlify用不同构建规则的情况
• 核对Netlify控制台配置的环境变量和本地.env文件内容完全匹配，缺漏环境变量也会触发同类报错
• 可删除本地node_modules和锁文件后重新安装依赖，执行生产打包命令测试，本地复现问题后修复效率更高。

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