Vue3+Webpack项目vue-fusioncharts报process为null错误如何解决

问题根因 #

Webpack 5 已经默认移除了Node环境核心变量的浏览器侧自动注入逻辑，不会主动提供全局process对象。你当前仅通过DefinePlugin嵌套定义了process.env.NODE_ENV，但vue-fusioncharts等第三方依赖的代码中可能存在直接访问process根对象的逻辑，此时process未被定义就会返回null，触发你遇到的警告。

另外你配置的babel-loader设置了排除node_modules目录，依赖的代码也不会被babel做polyfill处理，进一步导致变量缺失。

解决方案（任选其一即可） #

方案1：调整DefinePlugin配置，补全全局process定义 #

不要嵌套定义process.env，直接单独定义目标字段，同时补全全局process对象的兜底，修改webpack配置的plugins部分：

new webpack.DefinePlugin({
  // 不要用嵌套的对象写法定义process.env，单独定义每个环境变量更稳妥
  'process.env.NODE_ENV': JSON.stringify('production'),
  // 补全全局process对象的定义，避免依赖直接访问process时报空
  'process': JSON.stringify({ env: { NODE_ENV: 'production' } })
})

方案2：开启Webpack内置的process polyfill #

直接在webpack根配置中增加node配置项，开启process的自动注入：

module.exports = {
  // 其他现有配置保持不变
  node: {
    process: true
  }
}

方案3：用ProvidePlugin注入独立的process polyfill #

如果前面的方案不生效，可以安装独立的process兼容包，全局注入：

1. 安装依赖

npm install process --save-dev

2. 在webpack的plugins数组中增加配置：

new webpack.ProvidePlugin({
  process: 'process/browser',
})

额外说明 #

你当前配置的mode: 'production'本身已经会让Webpack自动设置process.env.NODE_ENV为production，如果采用方案2或3，也可以删除原来手动定义process.env的DefinePlugin配置，避免重复定义。

修改完成后重新执行npm run watch即可验证警告是否消除。

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