Webpack: Bundle.js – Uncaught ReferenceError: Prozess ist nicht definiert

Hier ist meins 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",
};

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

Das Bundle.js wird in meine Index.html eingefügt. Der Browser gibt dann den Fehler aus:

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)

Was sollte ich in webpack.config.js ändern, damit dieser Fehler verschwindet?

Aktualisierung Oktober 2020:

Für Webpack 5 können Sie verweisen process/browser aus dem passenden plugins Teil von 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',
    }),
  ]
}

Mit dotenv Paket:

1. Installieren dotenv:

   yarn add -D dotenv oder npm i -D dotenv

2. Hinzufügen .env Datei in Ihrem Projektstamm mit den erforderlichen Variablen:

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

3. Definieren Sie diese Variablen mit 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. Greifen Sie in Ihrem Quellcode auf Umgebungsvariablen zu:

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

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

PS für Namespace-Umgebungsvariablen überprüfen Sie die Zeilen 10 – 28 auf der oben erwähnten StackBlitz-Seite.

Sie müssen ein Plugin hinzufügen, um Ihre Umgebung zu definieren (in der Webpack-Konfiguration):

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

So habe ich das gelöst

ReferenceError: Prozess ist nicht definiert

Fehler mit Webpaket 5

1. npm i --save-dev process

2. Löschen Sie den Ordner „node_modules“.

3. Hinzufügen const webpack = require('webpack'); oben in deiner Konfigurationsdatei

4. Fügen Sie in Ihrer Webpack-Konfigurationsdatei im Plugin-Abschnitt Folgendes hinzu:

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

5. Also in the webpack add the alias like below:

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

6. Now do npm i

…and when you build your application the error will disappear.
you can read about webpck migration [here]

Webpaket 5 entfernt die Möglichkeit, mithilfe der Notation auf Umgebungsvariablen zuzugreifen process.env.MY_ENV_VAR. Ich hatte das gleiche Problem, weil ich ein bekam Uncaught ReferenceError: process is not defined Fehler in meiner Browserkonsole. Aus die Dokumentation zur Portierung von v4 auf v5 von Webpackerwähnen sie Folgendes:

1. Vor dem Upgrade auf v5, vergewissern Sie sich, dass Sie es leicht tun können

Versuchen Sie, die folgenden Optionen in Ihrer Webpack 4-Konfiguration festzulegen, und prüfen Sie, ob der Build noch korrekt funktioniert.

module.exports = {
   // ...
   node: {
       Buffer: false,
       process: false
   }
};

Webpack 5 entfernt diese Optionen aus dem Konfigurationsschema und verwendet immer false.

Diese Optionen müssen Sie beim Upgrade Ihrer Konfiguration für Webpack 5 wieder entfernen.

2. Behandlung von Umgebungsvariablen, weil process wurde entfernt

• Bezüglich Laufzeitfehler:
  • process ist nicht definiert.
    • Webpack 5 enthält kein Polyfill mehr für diese Node.js-Variable. Vermeiden Sie die Verwendung im Frontend-Code.
    • Möchten Sie die Frontend- und Browsernutzung unterstützen? Verwenden Sie die exports oder imports package.json-Feld, um je nach Umgebung unterschiedlichen Code zu verwenden.
      • Verwenden Sie auch die browser Feld zur Unterstützung älterer Bundler,.
      • Alternative: Codeblöcke mit umbrechen typeof process Schecks. Beachten Sie, dass sich dies negativ auf die Bündelgröße auswirkt.
    • Umgebungsvariablen mit verwenden möchten process.env.VARIABLE? Sie müssen die verwenden DefinePlugin oder EnvironmentPlugin um diese Variablen in der Konfiguration zu definieren.
      • Erwägen Sie die Verwendung VARIABLE stattdessen und stellen Sie sicher, dass Sie dies überprüfen typeof VARIABLE !== 'undefined' zu. process.env ist Node.js-spezifisch und sollte im Frontend-Code vermieden werden.

Angesichts der obigen Informationen ist es daher möglich, Umgebungsvariablen mit einem der beiden folgenden Plugins zu verwenden.

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
    ],
};

Dann ist es in Ihrem Produktionscode immer noch möglich, auf die Umgebungsvariable auf die gleiche Weise zu verweisen, Beispiel:

console.log(process.env.MY_ENV_VAR);

Wie sie jedoch in der oben enthaltenen Dokumentation sagten, wird die Verwendung von process.env ist NICHT der empfohlene Weg, da dies Node.js-spezifisch ist.

Webpack 5, die einfachste Lösung für mich…

npm install dotenv-webpack –save-dev

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

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

Um Fehler wie in der Frage angegeben zu vermeiden, musste ich in webpack.config.js die nächste Konfiguration bereitstellen (beachten Sie die Definition der Variablenebene: process.env):

new webpack.DefinePlugin({
                "process.env": JSON.stringify(process.env)
            })

Jetzt funktioniert es gut. Ich verwende Webpack 5.30.0, Vue 2.6.12 und Vuelidate 0.7.6.

Fehler, den ich zuvor in der Browserkonsole hatte:

Uncaught ReferenceError: process is not defined
    at Object.../node_modules/vuelidate/lib/withParams.js

Es ist nicht gut, dass die Browser-Client-Bibliothek “vuelidate” Node.js-spezifische env-Variablen benötigt. Verwirrte Build- und Laufzeitbereiche in der Bibliothek.