Webpack: Bundle.js - 未捕获的引用错误：process未定义。

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

我在Index.html文件中插入了Bundle.js，然后浏览器显示错误：

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中做哪些更改才能消除这个错误？

- cbll

---

在我的TypeScript项目中，我添加了一个包含以下内容的.d.ts文件：“declare var process: any;” - dr11

你能解释一下你如何在这里实现吗？在webpack配置中...？ - cbll

不要将其放在webpack配置中。应该放在任何顶级文件中，并声明为全局变量。它会被转译并声明为全局变量。现在，“process”可以在前端使用。请使用下面的DefinePlugin。 - dr11

Answer 1

对于Webpack 5，您可以从webpack.config.js适当的plugins部分引用process/browser：

// webpack needs to be explicitly required
const webpack = require('webpack')
// import webpack from 'webpack' // (if you're using ESM)

module.exports = {

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

  plugins: [
    // fix "process is not defined" error:
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ]
}

然后运行

npm install process

构建之前。

- Fergie

---

这个错误提示是：在路径 '/path/to/my/js' 中找不到模块 'process/browser'，无法解析。 - roundtheworld

你需要执行 "npm install process" 命令 - 我会更新我的回答。 - Fergie

我安装了NPM并出现以下错误：Module not found: Error: Can't resolve 'process/browser' in 'REDACTED\node_modules\async\dist' Did you mean 'browser.js'?``` - Exegesis

它对我有效，虽然我不明白为什么需要这样做。我知道process是Node中的东西，在浏览器中不可用，但我认为Webpack总是在Node上下文中进行评估，不管怎样？ - Simone

我特意在末尾添加了.js。所以;new webpack.ProvidePlugin({ process: 'process/browser.js' }) - Simon Somlai

Answer 2

对于命名空间环境变量（更安全），请查看此StackBlitz页面上的10-28行。

使用dotenv软件包：

1. Install dotenv:

   yarn add -D dotenv or npm i -D dotenv

2. Add .env file in your project root with the required variables:

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

3. Define these variables with 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. Access environment variables in your source code:

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

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

- Aakash

---

经过很多努力，这个解决方案终于可行了！谢谢你。 - Guruprasad

就像coderLogs一样，我在找到这个宝石之前挣扎了一段时间。谢谢!!! - Lone Ronin

注意这个方法。它将使用.env文件来覆盖任何现有的环境变量。最好先调用dotenv.config()，然后定义插件：'process.env': JSON.stringify(process.env)。 - jackblk

嗨@jackblk，我已经更新了答案。请现在检查一下。 - Aakash

这个操作会将所有环境变量都编码进你的客户端代码中，可能包括一些不应该公开的内容，也会使构建变得比必要的更大。这就是为什么现有的工具会给客户端环境变量加前缀 - 例如 CRA 使用 REACT_APP_，Next 使用 NEXT_PUBLIC_。 - jonrsharpe

Answer 3

这是我解决 Webpack 5 中出现的

ReferenceError: process is not defined

错误的方法：

1. npm i --save-dev process

2. 删除 "node_modules" 文件夹

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

4. 在你的 webpack 配置文件的插件部分中添加以下内容：

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

同样在webpack中添加别名，像下面这样：

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

现在执行npm i

...当你构建你的应用程序时，错误将会消失。 你可以阅读有关webpack迁移的信息[这里]

- Arian Al Lami

---

非常感谢@Arian Popalyar发布这个有用的答案。我在stackoverflow上查看了很多答案，但它们都无法解决问题。最终，在应用您的技巧后，问题得到了解决。 - Gulshan Aggarwal

在升级到Webpack 5之后，这对我在Cypress上起作用了。谢谢！ - Dhananjay Suresh

对我来说没有任何改变 :-| - Fred

Answer 4

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

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

- Kinnza

---

你会把这个添加到上面的配置文件哪里？如果放在“target”下面，会出现“未解决类型DefinePlugin”的错误。 - cbll

请在您的webpack.config.js文件顶部添加 "var webpack = require('webpack');"。 - Kinnza

现在我不再遇到错误了。谢谢。正在测试是否解决了整个问题 :) - cbll

谢谢。我已经寻找这个很长时间了 Q.Q. - Joseph Perez

对我来说，这个问题得到了解决，当我将 GraphQL 从 0.13.2 版本更新到 14.0.2 版本。 - rhythmo

Answer 5

Webpack 5移除了使用符号process.env.MY_ENV_VAR访问环境变量的功能。我曾经遇到同样的问题，因为浏览器控制台中出现了Uncaught ReferenceError: process is not defined错误。在从Webpack v4升级到v5的文档中，他们提到了以下内容：

1. 在升级到v5之前，请确认您可以轻松完成它

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被移除的问题

• 关于运行时错误：
  • process未定义。
    • webpack 5不再包含这个Node.js变量的polyfill。避免在前端代码中使用它。
    • 希望支持前端和浏览器使用？使用exports或imports package.json字段以根据环境使用不同的代码。
      • 还要使用browser字段支持旧版bundler，。
      • 替代方案：使用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特有的。

- roundtheworld

---

感谢您的评论。其中第一部分帮助我复制了我在Webpack 4上遇到的问题。这使我能够准确定位问题所在。 - srigi

Answer 6

使用 "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)
    })
  ],
};

:)

- Emanuel

---

当我记录该进程时，env对象为空。为什么？ - amir tbi

Answer 7

为了避免像我在问题中提供的那样的错误，我必须在webpack.config.js中提供下面的配置（请注意定义变量level: 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特定的环境变量，这不是一个好的事情。这会在库中混淆构建和运行时区域。

- Yan Pak

---

如果您需要加载 .env 文件，请先调用 dotenv.config()，然后使用此答案。Aakash 的答案将覆盖 .env 文件中的环境变量。 - jackblk

Answer 8

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

使用npm安装dotenv-webpack --save-dev

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

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

- Almedin Hodžić

---

要小心处理这个 - 你可能会意外地泄露配置凭证(例如：数据库信息等)。 - robertmain

Answer 9

在你的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文件中。

- Daniel Danielecki

Answer 10

如果对某人有用：

我尝试了几乎所有在这个讨论中的方法，但都没有成功。 当我深入研究问题时，我意识到导致我的应用程序出现此错误的原因是使用了assert库：

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

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

- Lukasavicus