Uncaught TypeError: Cannot read property 'webpackHotUpdate' of undefined

Question

I'm getting this error when the browser hits the following line in the "webpackified" app.js file:

/******/ (function(modules) { // webpackBootstrap
/******/    function hotDisposeChunk(chunkId) {
/******/        delete installedChunks[chunkId];
/******/    }
/******/    var parentHotUpdateCallback = this["webpackHotUpdate"];

In the last line of this snippet, this is undefined.

Despite this error, the app seems to be running just fine.

I'm not sure what parts of my webpack.config.js file are most relevant, but here are some possibly relevant snippets:

webpack.config.js

const HotModuleReplcement = new webpack.HotModuleReplacementPlugin();

...

module.exports = {

  ...

  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    port: 8000,
    open: true,
    proxy: [{
      context: ['/assets', '/api'],
      target: 'http://localhost:4000',
      secure: false
    }]
  },
  plugins: [HotModuleReplcement, HtmlWebpack]
};

Any idea what is happening here?

Answer 1

The core issue is that "this" should be "self" for webpages (as opposed to node).

The webpack.config.js should not be:

output: {
    path: 'dist',
      filename: '[name].js',
      publicPath: '/',
      globalObject: 'this' // do no do "this"
  },

but should be more like this:

output: {
    path: 'dist',
      filename: '[name].js',
      publicPath: '/',
      globalObject: 'self'
  },

More from webpack.js.org