更新React与Electron后出现Uncaught ReferenceError: global is not defined错误求助

依赖版本对比 #

原版本 #

"@rescripts/cli": "^0.0.13",
"@rescripts/rescript-env": "^0.0.11",
"electron": "^7.1.10",
"electron-builder": "^22.3.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0",

更新后版本 #

"@rescripts/cli": "^0.0.13",
"@rescripts/rescript-env": "^0.0.11",
"electron": "^21.1.1",
"electron-builder": "^23.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",

问题描述 #

应用升级后，Electron窗口、菜单可正常加载，但React部分无法渲染（基础"hello world"也不显示），控制台报错Uncaught ReferenceError: global is not defined。代码中未直接使用global变量，当前配置文件如下：

.webpack.config.js：

module.exports = config => {
  config.target = "electron-renderer";
  return config;
};

.rescriptsrc.js：

module.exports = [require.resolve("./.webpack.config.js")];

解决方案 #

1. 为global变量添加Polyfill #

Webpack 5（React Scripts 5.x基于此）不再默认给渲染进程提供Node.js全局变量，需手动通过插件注入：
修改.webpack.config.js：

const webpack = require('webpack');

module.exports = config => {
  config.target = "electron-renderer";
  // 注入global变量映射到globalThis
  config.plugins.push(
    new webpack.ProvidePlugin({
      global: 'globalThis'
    })
  );
  return config;
};

2. 补充Webpack 5的Fallback配置 #

Webpack 5移除了Node.js核心模块的自动polyfill，需显式禁用不需要的模块：
继续修改.webpack.config.js，添加resolve.fallback配置：

const webpack = require('webpack');

module.exports = config => {
  config.target = "electron-renderer";
  config.plugins.push(
    new webpack.ProvidePlugin({
      global: 'globalThis'
    })
  );
  // 禁用不需要的Node.js模块fallback，避免编译报错
  config.resolve.fallback = {
    ...config.resolve.fallback,
    path: false,
    fs: false,
    crypto: false,
    stream: false
  };
  return config;
};

3. 确认React 18渲染入口是否正确 #

虽然报错由global引发，但需确保React 18的渲染方式已更新（原ReactDOM.render已废弃）：
修改入口文件（如src/index.js）：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

4. 检查Rescripts兼容性 #

当前使用的@rescripts/cli@0.0.13版本较旧，可能不完全兼容React Scripts 5.x。若上述配置无效，可考虑替换为更活跃的CRA配置工具，或尝试升级Rescripts到最新版本（若有更新）。

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