Webpack: Bundle.js - Uncaught ReferenceError: process is not defined

Question

Here's my 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", }; 

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

The Bundle.js is inserted in my Index.html. The browser then gives the error:

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) 

What should I change in the webpack.config.js to make this error go away?

Answer 1

Update October 2020:

For webpack 5, you can reference process/browser from the appropriate plugins part of 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',     }),   ] } 

Answer 2

You need to add a plugin to define your env (in webpack config):

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