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

使用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. 在源代碼中訪問環境變量：

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

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

命名空間環境變量的 PS 檢查上述 StackBlitz 頁面上的第 10 - 28 行。

Answer 3

您需要添加一個插件來定義您的環境（在 webpack 配置中）：

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

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 遷移的信息[此處]

Answer 5

Webpack 5移除了使用符號process.env.MY_ENV_VAR訪問環境變量的能力。 我遇到了同樣的問題，因為我在瀏覽器控制台中收到Uncaught ReferenceError: process is not defined錯誤。 從porting from v4 to v5 of Webpack 的文檔中，他們提到了以下內容：

1. 升級到v5之前，確認你可以輕松做到

嘗試在您的 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 安裝 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”讀取 React 中的環境變量：“^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 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文件中定義它們。

Answer 10

如果它對某人有用：

我嘗試了該線程中的幾乎所有方法，但均未成功。 當我深入研究問題時，我意識到導致我的應用程序出現此錯誤的原因是assert lib 的使用：

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

順便說一句：我正在使用 Angular@~11.2.7

Answer 11

我的問題是process is undefined error on internet explorer 11 using webpack 5。

感謝@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 12

簡單的方法：調用 webpack 時在變量“NODE_ENV”前面加上 ie NODE_ENV=production webpack --watch

Answer 13

這就是我在 Webpack 5 上解決我的問題的方法

紗線添加過程-D

將此添加到插件部分的 webpack 配置文件中

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

還要添加別名：

resolve: {
  alias: {
     process: "process/browser.js"
  }
}