Electron+React接入BluePrintJS报process is not defined问题求助

错误根源说明 #

你之前修改的是Electron主进程的webpack配置，而你编写的app.jsx属于渲染进程代码，由独立的渲染进程webpack配置负责打包，所以之前的操作不生效。BlueprintJS的组件运行时会读取process全局变量，而Webpack 5+默认不注入Node.js全局变量polyfill，因此渲染进程运行时找不到process触发报错。

修复步骤 #

• 第一步：安装process polyfill依赖
  执行命令：
  npm install process -D
• 第二步：修改渲染进程webpack配置
  找到项目根目录下的webpack.renderer.config.js（如果不存在可手动创建），修改为以下配置：

const webpack = require('webpack');

module.exports = {
  module: {
    rules: require('./webpack.rules'),
  },
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
    alias: {
      process: "process/browser"
    },
  },
  plugins: [
    // 全局注入process变量
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
    // 定义环境变量
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    })
  ]
};

• 第三步：重启开发服务
  执行npm run start重启项目，错误即可消失。

可选临时方案 #

如果不想修改webpack配置，可以直接在渲染进程的入口HTML文件的<head>标签最顶部加入以下代码，手动挂载process全局变量：

<script>
  window.process = {
    env: {
      NODE_ENV: 'development'
    }
  }
</script>

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