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

时间：2016-12-28 09:54:56

标签： javascript node.js webpack node-modules

这是 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中更改什么才能使此错误消失？

11 个答案:

答案 0 :(得分：18)

更新2020年10月：

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

// 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',
    }),
  ]
}

答案 1 :(得分：7)

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

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

答案 2 :(得分：6)

使用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')

module.exports = {
  //...
  plugins: [
    // ...
    new webpack.DefinePlugin({
       'process.env': JSON.stringify(dotenv.config().parsed) // it will automatically pick up key values from .env file
    })
    // ...
  ]
  //...
}

步骤4：访问environment variables中的source code：

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

重要链接：

祝你好运...

答案 3 :(得分：5)

我就是这样解决的

<块引用>

ReferenceError: 进程未定义

Webpack 5 错误

  1. npm i --save-dev 进程

  2. 删除节点模块文件夹

  3. 在你的 webpack 配置文件插件部分添加下面

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

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

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

现在做 npm i 当您构建应用程序时，错误就会消失。

答案 4 :(得分：4)

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。

答案 5 :(得分：1)

您的dotenv-webpack中有dotenv / webpack，但仍不能在 Angular 上运行吗？在浏览器上运行process.env应用程序（没有Angular）时，很可能是您试图访问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文件中定义它们。

答案 6 :(得分：0)

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

<块引用>

npm install dotenv-webpack --save-dev

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

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

答案 7 :(得分：0)

为了避免我在 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 变量。库中混淆的构建和运行时区域。

答案 8 :(得分：0)

我的问题是使用 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) {
    // ...
}

答案 9 :(得分：0)

使用 "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 :(得分：0)

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

相关问题
最新问题