ReferenceError: global is not defined at eval

Question

I'm experiencing an error that I believe is from webpack's side. Here it is:

index.js:9 Uncaught ReferenceError: global is not defined
    at eval (index.js:9)
    at Object.<anonymous> (bundle.js:2548)
    at __webpack_require__ (bundle.js:622)
    at fn (bundle.js:48)
    at eval (client:1)
    at Object.<anonymous> (bundle.js:2541)
    at __webpack_require__ (bundle.js:622)
    at bundle.js:668
    at bundle.js:671

My webpack is:

import webpack from 'webpack';
import merge from 'webpack-merge';
import path from 'path';
import isDev from 'isdev';
import { Dir } from './src/utils';

const TARGET = process.env.npm_lifecycle_event;

let Config = {
  entry: [
    'babel-polyfill',
    'react-hot-loader/patch',
    path.join(Dir.src, 'client.js'),
  ],
  output: {
    path: path.join(Dir.public, 'build'),
    filename: 'bundle.js',
  },
  target: 'node',
  resolve: {
    modules: [Dir.src, 'node_modules'],
    extensions: ['*', '.js', '.jsx', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        enforce: 'pre',
        loader: 'eslint-loader',
        exclude: /node_modules/,
        include: Dir.src,
      },
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
  ],
};

if (TARGET === 'build:prod' && !isDev) {
  Config = merge(Config, {
    bail: true,
    devtool: 'source-map',
    output: { publicPath: '/build/' },
    plugins: [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
        comments: false,
        dropDebugger: true,
        dropConsole: true,
        compressor: {
          warnings: false,
        },
      }),
    ],
  });
}

if (TARGET === 'server:dev' && isDev) {
  Config = merge(Config, {
    devtool: 'eval',
    entry: ['webpack-hot-middleware/client'],
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
    ],
  });
}

const WebpackConfig = Config;
export default WebpackConfig;

This error only started to show up once I added what Redux suggests for server-side rendering. So I'm using hydration of store with window.__PRELOADED_STATE__ in ./src/utils/store.js and it's also in index.ejs which is the file rendered to the client.

This is also my .babelrc if anything:

{
    "presets": ["es2015", "react", "stage-0"],
    "env": {
        "development": {
            "plugins": ["react-hot-loader/babel"],
        },
    },
    "plugins": [
        "babel-root-import"
    ],
}

Hope anyone can help with this - I haven't found a solution in my research and trials. Thank you!

Solution

The problem is, I think, this target: 'node' in your webpack.config.js. This states basically that Webpack may assume that the bundle will be running in a node-like environment, where globals like global and require are provided by the environment. Unless otherwise specified, Webpack assumes a browser environment and rewrites global to point to window. Your configuration disables this rewriting.

You could either remove target: 'node' from your config, or explicitly enable global rewriting by adding node: {global: true} to your config object.

Comments

[Daniel Danielecki]

You can read this answer stackoverflow.com/a/57509175/11127383

[adambargh]

Thanks for that @Stefan - you're right. The only reason I put it is because I had an issue saying Cannot resolve 'fs' and the solution presented was target:'node' here: github.com/webpack-contrib/css-loader/issues/447... and then I got the global not defined so I'm kind of in a loop of errors and can't find something to kill all of them off... any ideas?

[Stefan Dragnev]

Symptomatically, you need to get webpack to mock everything that pops up. for example for fs: node: { fs: 'empty' }. I don't know if that is the correct solution to what you're trying to do.

[Stefan Dragnev]

That is, node: {global: true, fs: 'empty'} in webpack.config.js

[adambargh]

So that takes care of those errors and then I'm presented with GetEnv.Nonexistent: SERVER_HOST does not exist and no fallback value provided. - I'm playing whack-a-mole with these errors

[bluefalcon]

this was super useful!! Thanks !!

[Arda Zaman]

You are saved my life. Thanks Stefan :)

[Ravi MCA]

I ran into same issue and unfortunately I don't have webpack.config.js. But had babel-jest-config.json, jest.config.js, tsconfig.app.json, tsconfig.json. In babel-jest-config.json used { "targets": { "node": {"global": true} } instead { "targets": { "node": "current" } but no luck.

[Ravi MCA]

In jest-config.js used target: 'node',node: { global: true } but no luck.