webpack 2 upgrade produces "webpackHotUpdate is not defined"

I’m submitting a bug report

webpack and webpack-dev-server version: webpack: 2.1.0-beta.20 webpack-dev-server: 1.14.1 and 2.1.0-beta.3

Please tell us about your environment: Linux Fedora 24

Current behavior: After upgrading to Webpack 2.1, webpack-dev-server throws error after recompiling packages.

Expected/desired behavior: Reloading to work

• Steps to reproduce

I’ve upgraded webpack to v. 2.1 I use it with Angular 2 After that webpack-dev-server will always throw the following Uncaught errors when files have changed. There are no errors in the console though:

Unexpected token <`

And

ReferenceError: webpackHotUpdate is not defined

This wouldn’t happen with Webpack 1. It now happens with webpack-dev-server both 1 and 2, and independently from whether or not HMR is enabled

• My config.

"use strict";

/**
 * Environment
 */

process.env.NODE_ENV = "development";

/*
 * Webpack packages
 */

const merge = require("webpack-merge"),
  webpack = require("webpack");

/*
 * Webpack Common Config
 */
const common = require("./webpack.common"),
  PATHS = require("./webpack.paths");

/**
 * Webpack Dev config
 */
const options = {
    host: "localhost",
    port: 3000
  },
  METADATA = {
    baseUrl: "localhost"
  };

const webpackDev = merge(common, {
  // json: true,
  metadata: METADATA,
  debug: true,
  devtool: "source-map",
  output: {
    path: PATHS.build,
    filename: "[name].js",
    sourceMapFilename: "[name].map",
    chunkFilename: "[id].chunk.js"
  },
  devServer: {
    port: options.port,
    host: options.host,
    historyApiFallback: true,
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    },
    outputPath: PATHS.build + "/",
    inline: true,
    hot: false,
    stats: {
      hash: false,
      version: false, // webpack version
      timings: false, // show build compilation time (already shown)
      assets: true,
      chunks: false, // verbose output
      modules: false, // similar to chunks
      reasons: true,
      children: false,
      source: true,
      errors: true,
      errorDetails: true,
      warnings: true,
      publicPath: true
    }
  },
  module: {
    // Add file loaders which will be hashed in production
    loaders: [{
      test: /\.svg$/,
      loader: "file?name=[path][name].[ext]",
      include: PATHS.images
    }, {
      test: /url\.(sass|scss)$/,
      loader: "file?name=[path][name].css!postcss!sass",
      exclude: [PATHS.nodeModules]
    }]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin({
      multiStep: true
    })
  ],
  sassLoader: {
    indentedSyntax: true,
    outputStyle: "expanded"
  }
});

module.exports = webpackDev;

[cortopy]

Thank you @SpaceK33z , I’ve made the corrections you suggested and tested again. I’ve opened https://github.com/webpack/webpack/issues/2985 now.

[SpaceK33z]

@cortopy, thanks, I can reproduce your error with that. I have tried a couple of things, but unfortunately failed in finding a fix.

Some feedback:

• --watch in npm start is not necessary.
• You try to include dev-server client twice (src/index.ejs and by using inline: true in webpack.dev.js). Remove the one in src/index.ejs.
• Had to remove the line import "./vendor/web-animations-next.min";

The bug doesn’t seem to be in the dev-server. Most of the HMR logic is in webpack itself. I would suggest to make a ticket over there with the above repo (and the points above fixed). You’ll get better help over there.