I recently played with the callback function from the Webpack 2 Node API, in an attempt to log a custom message when compiling completed. https://webpack.js.org/api/node/
Doing so introduced strange, intermittent client-side errors. Webpack would appear to compile just fine; including firing off my callback without reporting any errors.
Then, loading the bundled files began throwing the following errors in the browser console (regardless of what code I put in the callback)
MOST COMMON:
Uncaught TypeError: Cannot read property 'NODE_ENV' of undefined
ALSO COMMON:
Uncaught TypeError: _invariant is not a function
It's important to note that this did not happen every time; only every 2, 3 times out of 5 that we restart the server. It does, however, only happen when a callback of any kind is passed to the webpack() function.
OUR CODE:
if (process.env.NODE_ENV === 'production') {
console.log('************** 📁 RUNNING IN PRODUCTION MODE 📁 **************');
// SERVE THE STATIC FOLDER WHERE WEBPACK HAS BUILT OUR STUFF
app.use('/static', express.static(path.join(__dirname, './CLIENTSIDE/static')));
} else {
// ENABLE HOT RELOADING IN DEV MODE
console.log(' 🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧');
console.log(' 🔧🔧🔧🔧 RUNNING IN DEV MODE 🔧🔧🔧🔧');
console.log(' 🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧🔧 \n');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.dev');
const compiler = webpack(webpackConfig, (err, stats) => {
console.log('THIS CALLBACK BREAKS THINGS!');
})
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: webpackConfig.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));
}
WEBPACK.CONFIG.DEV.JS:
const path = require('path');
const webpack = require('webpack');
module.exports = {
devtool: 'cheap-eval-source-map',
entry: {
background: ['webpack-hot-middleware/client', path.join(__dirname, '/CLIENTSIDE/components/background')],
uniqueShare: ['webpack-hot-middleware/client', path.join(__dirname, '/CLIENTSIDE/components/uniqueShare')],
starRating: ['webpack-hot-middleware/client', path.join(__dirname, '/CLIENTSIDE/components/starRating')],
testingPage: ['webpack-hot-middleware/client', path.join(__dirname, '/CLIENTSIDE/components/testingPage')],
style: ['webpack-hot-middleware/client', path.join(__dirname, '/CLIENTSIDE/components/style')],
v2_style: ['webpack-hot-middleware/client', path.join(__dirname, '/CLIENTSIDE/components/v2-styles')]
},
output: {
path: path.join(__dirname, '/CLIENTSIDE/static'),
filename: '[name].js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
],
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
include: path.join(__dirname, './CLIENTSIDE/components'),
loaders: ['imports-loader?define=>false', 'react-hot-loader', { loader: 'babel-loader', options: {
cacheDirectory: true,
presets: ['react', 'es2015', 'stage-0'],
plugins: ['transform-decorators-legacy', 'transform-object-assign', 'array-includes']
}}
]
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
};
RELEVANT PACKAGE.JSON:
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-array-includes": "^2.0.3",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.4",
"node-sass": "^4.5.3",
"react-hot-loader": "^1.3.1",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"style-loader": "^0.18.1",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.10.2",
"webpack-hot-middleware": "^2.18.0"
via
Zfalen
