Monday 12 June 2017

Webpack / Node API Callback Throws Intermittent Client-Side Errors

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

No comments:

Post a Comment