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!
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.