Webpack: Bundle.js – Uncaught ReferenceError: proces is niet gedefinieerd

Hier is mijn 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",
};

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

De Bundle.jswordt ingevoegd in mijn Index.html. De browser geeft dan de foutmelding:

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)

Wat moet ik veranderen in webpack.config.js om deze fout te laten verdwijnen?

Antwoord 1, autoriteit 100%

Update oktober 2020:

Voor webpack 5 kunt u verwijzen naar process/browservanuit het juiste plugins-gedeelte van 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',
    }),
  ]
}

Antwoord 2, autoriteit 32%

U moet een plug-in toevoegen om uw env te definiëren (in webpack-configuratie):

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

Antwoord 3, autoriteit 27%

Met dotenvknooppuntmodule:

STAP 1: INSTALLEER dotenv:

yarn add -D dotenvof npm i -D dotenv

STAP 2: VOEG .env-bestand toe aan uw projecthoofdmap met de vereiste variabelen:

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

STAP 3: DEFINIEER deze variabelen met 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)
    })
    // ...
  ]
  //...
}

STAP 4: TOEGANG environment variablesin uw source code:

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

Belangrijke links:

• dotenv: https://www.npmjs.com/package/ dotenv
• webpack.DefinePlugin: https://webpack.js .org/plugins/define-plugin/
• Stackblitz-voorbeeld voor dotenv – https://stackblitz.com/edit/ node-kdfi4z?file=index.js

Veel succes…

Antwoord 4, autoriteit 21%

Zo heb ik de

. opgelost

ReferenceError: proces is niet gedefinieerd

fout met Webpack 5

1. npm i --save-dev process

2. Verwijder de map “node_modules”

3. Voeg const webpack = require('webpack');toe bovenaan uw configuratiebestand

4. In uw webpack-configuratiebestand, plug-in-sectie, voeg hieronder toe:

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

5. Voeg ook in het webpack de alias toe zoals hieronder:

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

6. Doe nu npm i

…en wanneer u uw toepassing bouwt, zal de fout verdwijnen.
u kunt [hier]lezen over webpck-migratie

Antwoord 5, autoriteit 16%

Webpack 5verwijdert de mogelijkheid om toegang te krijgen tot omgevingsvariabelen met de notatie process.env.MY_ENV_VAR. Ik had hetzelfde probleem omdat ik een Uncaught ReferenceError: process is not definedfout kreeg in mijn browserconsole. Uit de documentatie van het overzetten van v4 naar v5 van Webpackvermelden ze het volgende:

1. Voordat u een upgrade naar v5 uitvoert, verifieert u of u dit gemakkelijk kunt doen

Probeer de volgende opties in uw webpack 4-configuratie in te stellen en
controleer of de build nog steeds correct werkt.

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

webpack 5 verwijdert deze opties uit het configuratieschema en gebruikt altijd false.

Je moet deze opties weer verwijderen bij het upgraden van je
configuratie voor webpack 5.

2. Omgaan met env-vars omdat processis verwijderd

• Met betrekking tot runtime-fouten:
  • processis niet gedefinieerd.
    • webpack 5 bevat niet langer een polyfill voor deze Node.js-variabele. Gebruik het niet in de frontend-code.
    • Wilt u frontend- en browsergebruik ondersteunen? Gebruik het veld exportsof importspackage.json om verschillende code te gebruiken, afhankelijk van de
      omgeving.
      • Gebruik ook het veld browserom oudere bundelaars te ondersteunen.
      • Alternatief: verpak codeblokken met de controles typeof process. Houd er rekening mee dat dit een negatief effect heeft op de bundelgrootte.
    • Wilt u omgevingsvariabelen gebruiken met process.env.VARIABLE? U moet de DefinePluginof EnvironmentPlugingebruiken om deze te definiëren
      variabelen in de configuratie.
      • Overweeg om in plaats daarvan VARIABLEte gebruiken en zorg ervoor dat u typeof VARIABLE !== 'undefined'ook aanvinkt. process.envis specifiek voor Node.js
        en moet worden vermeden in frontend-code.

Daarom is het, gezien de bovenstaande informatie, mogelijk om omgevingsvariabelen te gebruiken met een van de twee onderstaande plug-ins.

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

Dan is het in uw productiecode nog steeds mogelijk om op dezelfde manier naar de omgevingsvariabele te verwijzen, bijvoorbeeld:

console.log(process.env.MY_ENV_VAR);

Echter, zoals ze zeiden in de documentatie hierboven, is het gebruik van process.envNIET de aanbevolen manier, aangezien dat specifiek is voor Node.js.

Antwoord 6, autoriteit 3%

Webpack 5, de gemakkelijkste oplossing voor mij…

npm installeer dotenv-webpack –save-dev

// webpack.config.js
const Dotenv = require('dotenv-webpack');
module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

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

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

import * as process from "process";
window["process"] = process;

const dotenv = require("dotenv-webpack");
const webpackConfig = {
  plugins: [new dotenv()]
};
module.exports = webpackConfig; // Export all custom Webpack configs.

const webpackConfig = {
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env)
    })
  ],
};

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

if (process.env.PATH_LEGACY) {
    // ...
}