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

Posted 2023-03-07

技术标签:

【中文标题】Webpack：Bundle.js - 未捕获的 ReferenceError：未定义进程【英文标题】：Webpack: Bundle.js - Uncaught ReferenceError: process is not defined 【发布时间】：2017-05-12 14:04:38 【问题描述】：

这是我的 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 中进行哪些更改以消除此错误？

【问题讨论】：

对于我的打字稿项目，我添加了具有以下内容的 .d.ts 文件：“declare var process: any;” 你能解释一下你是如何在这里实现的吗？在 webpack 配置中..？不在 webpack 配置中。在任何***文件中并定义为全局。它由转译处理并声明为全局。现在可以在前面使用“过程”。使用下方的DefinePlugin 【参考方案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',
    ),
  ]

【讨论】：

这给了我错误：Module not found: Error: Can't resolve 'process/browser' in '/path/to/my/js' 你需要“npm install process”-我会更新我的答案啊，明白了，我能够使用稍微不同的方法让它工作。我会提供我自己的答案。我安装了 NPM 并得到：

ERROR in ./node_modules/async/dist/async.mjs 60:25-32 Module not found: Error: Can't resolve 'process/browser' in 'REDACTED\node_modules\async\dist' Did you mean 'browser.js'?

在“npm i process”之后仍然是Module not found: Error: Can't resolve 'process/browser' in '/path/to/my/js'。【参考方案2】：

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

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

【讨论】：

你会在哪里添加到上面的配置中？将其设置在“目标”下方会给我“未解析类型 DefinePlugin”，。添加“var webpack = require('webpack');”在 webpack.config.js 文件的顶部我现在没有收到错误。谢谢。测试看看这是否解决了整体问题:) 我不再收到上述错误。但现在相反，我得到Uncaught ReferenceError: global is not defined ....关于这个的任何提示？欣赏它。在这里打开它：***.com/questions/41359987/… 我不确定，但我看到你找到了解决方案 :)【参考方案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

祝你好运……

【讨论】：

经过大量的努力，这个解决方案有效！谢谢老兄。就像 coderLogs 一样，我挣扎了一段时间才找到这个 gem。谢谢！！！嗨，这不适用于 docker 在运行时设置的环境变量。小心这种方法。这将使用 .env 文件覆盖任何现有的 env var。最好先调用dotenv.config()，然后定义插件：'process.env': JSON.stringify(process.env) 嗨@jackblk，我已经更新了答案。请立即检查。【参考方案4】：

这就是我解决问题的方法

ReferenceError: 未定义进程

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]

【讨论】：

非常非常感谢@Arian Popalyar 发布了这个有用的答案。我在***上检查了很多答案，但他们无法解决。最后，在应用您的技巧后，它解决了问题。升级到 Webpack 5 后，这对 Cypress 有用。谢谢！【参考方案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 的。

【讨论】：

【参考方案6】：

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

npm install dotenv-webpack --save-dev

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

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

【讨论】：

...小心这一点 - 您可能会不小心泄露配置凭据（即：数据库信息等）【参考方案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 特定的环境变量。混淆了库中的构建和运行时区域。

【讨论】：

如果您需要加载 .env 文件，请先致电dotenv.config()，然后使用此答案。 Aakash 的回答将覆盖 .env 文件中的 env var。【参考方案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 文件中定义它们。

【讨论】：

【参考方案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)
    )
  ],
;

【讨论】：

【参考方案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) 
    // ...

【讨论】：

【参考方案11】：

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

【讨论】：

以上是关于Webpack：Bundle.js - 未捕获的 ReferenceError：未定义进程的主要内容，如果未能解决你的问题，请参考以下文章

使用 webpack 打包 js

解读webpack的bundle.js

webpack 代码拆分 - 创建一个额外的 bunlde: 0.bundle.js

从 Webpack bundle.js 获取/导入 bootstrap.js

使用 SourceMap 解绑 webpack bundle.js

Webpack：找不到bundle.js

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

带dotenv节点模块：

第 1 步：安装dotenv:

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

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

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

重要链接：

带`dotenv`节点模块：

第 1 步：安装`dotenv`:

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

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

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