Webpack：Bundle.js - 未捕获的 ReferenceError：未定义进程

Question

这是我的 webpack.config.js

"use strict";

module.exports = {
    entry: ['./main.js'],
    output: { path: __dirname, filename: 'bundle.js' },
    module: {
        loaders: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {test: /\.json$/, loader: "json"},
        ]
    },
    externals: {
        React: 'react',
    },
    target: "node",
};

还有 Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table';
import Chart from 'chartjs';
import jQuery from 'jquery';
import vis from 'vis';
import babel from 'babel-core';

Bundle.js 被插入到我的 Index.html 中。然后浏览器给出错误：

Uncaught ReferenceError: process is not defined
    at Object.measureMethods (bundle.js:1297)
    at Object.<anonymous> (bundle.js:530)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:288)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:158)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:110)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:90)

我应该在 webpack.config.js 中进行哪些更改以消除此错误？

Answer 1

2020 年 10 月更新：

对于 webpack 5，您可以从 webpack.config.js 的相应 plugins 部分引用 process/browser

// webpack needs to be explicitly required
const webpack = require('webpack')

module.exports = {

/* ... rest of the config here ... */

  plugins: [
    // fix "process is not defined" error:
    // (do "npm install process" before running the build)
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ]
}

Answer 2

你需要添加一个插件来定义你的环境（在 webpack 配置中）：

   plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ],

Answer 3

带dotenv节点模块：

第 1 步：安装dotenv:

yarn add -D dotenv 或 npm i -D dotenv

第 2 步：在项目根目录中添加 .env 文件，其中包含所需的变量：

NODE_ENV=development
apiKey=w23io222929kdjfk
domain=example.domain.org

第 3 步：使用 webpack.DefinePlugin 定义这些变量：

// webpack.config.js
const webpack = require('webpack')
const dotenv = require('dotenv')

// this will update the process.env with environment variables in .env file
dotenv.config();

module.exports = {
  //...
  plugins: [
    // ...
    new webpack.DefinePlugin({
       'process.env': JSON.stringify(process.env)
    })
    // ...
  ]
  //...
}

第 4 步：在您的 source code 中访问 environment variables：

// src/index.js
alert(process.env.NODE_ENV)
alert(process.env.apiKey)

---

重要链接：

• dotenv: https://www.npmjs.com/package/dotenv
• webpack.DefinePlugin: https://webpack.js.org/plugins/define-plugin/
• dotenv 的 Stackblitz 示例 - https://stackblitz.com/edit/node-kdfi4z?file=index.js

祝你好运……

Answer 4

这就是我解决问题的方法

ReferenceError: 未定义进程

Webpack 5

出错

1. npm i --save-dev process

2. 删除“node_modules”文件夹

3. 在配置文件的顶部添加const webpack = require('webpack');

4. 在你的 webpack 配置文件的插件部分，添加如下：

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

5. 同样在 webpack 中添加如下别名：

   resolve: {
    alias: {
        process: "process/browser"
    },
   

6. 现在做npm i

...当您构建应用程序时，错误将消失。 您可以阅读有关 webpck 迁移的信息 [here]

Answer 5

Webpack 5 移除了使用符号 process.env.MY_ENV_VAR 访问环境变量的能力。我遇到了同样的问题，因为我在浏览器控制台中收到 Uncaught ReferenceError: process is not defined 错误。来自the documentation of porting from v4 to v5 of Webpack，他们提到了以下内容：

1.在升级到 v5 之前，verify that you can easily do it

尝试在您的 webpack 4 配置中设置以下选项并 检查构建是否仍然正常工作。

module.exports = {
   // ...
   node: {
       Buffer: false,
       process: false
   }
};

webpack 5 从配置模式中移除了这些选项，并且将始终使用 false。

升级时您必须再次删除这些选项 webpack 5 的配置。

2。处理环境变量，因为 process 已删除

• 关于运行时错误：
  • process 未定义。
    • webpack 5 不再包含此 Node.js 变量的 polyfill。避免在前端代码中使用它。
    • 想要支持前端和浏览器的使用？使用 exports 或 imports package.json 字段来使用不同的代码，具体取决于 环境。
      • 还可以使用 browser 字段来支持旧的捆绑器。
      • 替代方案：使用typeof process 检查包装代码块。请注意，这将对包大小产生负面影响。
    • 想要将环境变量与process.env.VARIABLE 一起使用？您需要使用DefinePlugin 或EnvironmentPlugin 来定义这些 配置中的变量。
      • 考虑改用VARIABLE，并确保也检查typeof VARIABLE !== 'undefined'。 process.env 是特定于 Node.js 的 并且应该在前端代码中避免使用。

因此，鉴于上述信息，可以使用以下两个插件之一来使用环境变量。

const webpack = require("webpack");

module.exports = {
    ...
    plugins: [
        new webpack.DefinePlugin({
            "process.env.MY_ENV_VAR": JSON.stringify(process.env.MY_ENV_VAR)
        }),
        new webpack.EnvironmentPlugin(['MY_ENV_VAR']); // <--This is shorthand, does the same thing as the DefinePlugin
    ],
};

然后在您的生产代码中，仍然可以以相同的方式引用环境变量，例如：

console.log(process.env.MY_ENV_VAR);

但是，正如他们在上面包含的文档中所说，使用 process.env 不是推荐的方式，因为这是特定于 Node.js 的。

Answer 6

Webpack 5，对我来说最简单的解决方案...

npm install dotenv-webpack --save-dev

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

Answer 7

为了避免我在 webpack.config.js 中提供了下一个配置（注意定义变量级别：process.env）的问题中表示的错误：

new webpack.DefinePlugin({
                "process.env": JSON.stringify(process.env)
            })

现在它工作正常。我正在使用 webpack 5.30.0、Vue 2.6.12 和 vuelidate 0.7.6。

我之前在浏览器控制台中遇到的错误：

Uncaught ReferenceError: process is not defined
    at Object.../node_modules/vuelidate/lib/withParams.js

这不是好事，浏览器客户端库“vuelidate”需要 Node.js 特定的环境变量。混淆了库中的构建和运行时区域。

Answer 8

在您的webpack 中有dotenv-webpack/dotenv，但仍然无法在 Angular 上运行？很可能您在浏览器上运行Angular 应用程序时尝试访问process.env（没有Angular Universal），例如ng serve.

运行npm i -S process，然后在polyfills.ts中粘贴下面的代码

import * as process from "process";
window["process"] = process;

或者，如果不是这种情况，并且您正在寻找webpack 来获取环境变量，那么（我不知道为什么还没有人建议）dotenv-webpack 是最简单的。

const dotenv = require("dotenv-webpack");
const webpackConfig = {
  plugins: [new dotenv()]
};
module.exports = webpackConfig; // Export all custom Webpack configs.

当然，您需要在项目根目录的.env 文件中定义它们。

Answer 9

允许我使用 "webpack": "^5.1.3",

读取 React 中的环境变量

webpack.config.js

const webpackConfig = {
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env)
    })
  ],
};

:)

Answer 10

我的问题是使用 webpack 5 在 Internet Explorer 11 上出现 process is undefined 错误。

感谢@ArianPopalyar，这就是我解决process.env.MY_ENV_VAR问题的方法。
Ref. Answer

除了她的解决方案，我在webpack.config.js中添加了EnvironmentPlugin：

...
plugins: [
    new webpack.ProvidePlugin({
        process: 'process/browser'
    }),
    new webpack.EnvironmentPlugin({
        PATH_MODERN: 'dist/modern/domready.min.js',
        PATH_LEGACY: 'dist/legacy/domready.min.js',
        DEBUG: false
    }),
    ...
]

并在 index.js 中使用它

if (process.env.PATH_LEGACY) {
    // ...
}

Answer 11

简单的方法：在调用 webpack 时添加变量“NODE_ENV”，即NODE_ENV=production webpack --watch