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