Webpack: Bundle.js - Uncaught ReferenceError: process is not defined

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

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

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

Answer 2

使用 dotenv 套餐：

安装dotenv:

yarn add -D dotenv 或 npm i -D dotenv

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

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

用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)
    })
    // ...
  ]
  //...
}

访问源代码中的环境变量：

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

StackBlitz 示例：https://stackblitz.com/edit/node-kdfi4z?file=index.js

P.S。对于命名空间环境变量，请检查上述 StackBlitz 页面上的第 10 - 28 行。

Answer 3

在 webpack 中有 dotenv-webpack/dotenv 但在 Angular 中仍然不起作用？当浏览器上的 Angular 应用运行时（没有 Angular Universal），您很可能正在尝试访问 process.env，例如通过 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 4

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 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

Try to set the following options in your webpack 4 configuration and check if build still works correctly.
module.exports = {
   // ...
   node: {
       Buffer: false,
       process: false
   }
};
webpack 5 removes these options from the configuration schema and will always use false.

You have to remove these options again when upgrading your configuration for webpack 5.

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

Regarding Runtime Errors:

process is not defined.

webpack 5 does no longer include a polyfill for this Node.js variable. Avoid using it in the frontend code.

Want to support frontend and browser usage? Use the exports or imports package.json field to use different code depending on the environment.

Also use the browser field to support older bundlers,.

Alternative: Wrap code blocks with the typeof process checks. Note that this will have a negative impact on the bundle size.

Want to use environment variables with process.env.VARIABLE? You need to use the DefinePlugin or EnvironmentPlugin to define these variables in the configuration.

Consider using VARIABLE instead and make sure to check typeof VARIABLE !== 'undefined' too. process.env is Node.js specific and should be avoided in frontend code.

因此，根据以上信息，可以使用以下两个插件之一使用环境变量。

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

我就是这样解决的

ReferenceError: process is not defined

Webpack 5

出错

npm i --save-dev process
删除“node_modules”文件夹
在配置文件的顶部添加 const webpack = require('webpack');

在您的 webpack 配置文件的插件部分，添加以下内容：

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

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

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

现在npm i

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

Answer 8

为了避免像我在 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 9

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

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

除了她的解决方案，我在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 10

允许我读取 React 中的环境变量，使用 "webpack": "^5.1.3",

webpack.config.js

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

:)

Answer 11

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

Answer 12

如果对某人有用：

我几乎尝试了此线程中的所有方法，但均未成功。当我深入研究问题时，我意识到导致我的应用程序出现此错误的原因是 assert lib:

的使用

import * as assert from 'assert';
... 
assert(myVariable !== undefined, "Try to update undefined myVariable ");

顺便说一句：我正在使用 Angular@~11.2.7

Webpack: Bundle.js - Uncaught ReferenceError: process is not defined

Webpack: Bundle.js - Uncaught ReferenceError: process is not defined

javascript

node.js

webpack

node-modules