webpack: "Uncaught Error: [HMR] Hot Module Replacement is disabled." appearing when adding special entry point

Hot Module Replacement is disabled. means the HotModuleReplacementPlugin is not used.

--hot adds it. (because the CLI have access to your webpack configuration)

hot: true doesn’t add it. (because the API doesn’t have access to your webpack configuration)

The docs are wrong… 😢

Just use webpack-dev-server --hot --inline and don’t anything special about webpack-dev-server or HMR to your webpack.config.js.

You have to push new webpack.HotModuleReplacementPlugin() this into your plugins config, webpack-dev-server when used with nodejs api do not add it automatically

var config = require('webpack.config');
config.plugins.push(new webpack.HotModuleReplacementPlugin())

I’m getting the same, I had:

  devServer: {
    hot: true,
    inline: true
  }

in my webpage.config.js and was getting errors when running webpack-dev-server. However, running webpack-dev-server --hot --inline makes everything work as expected.

just add the plugin into the webpack config file like this:

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
// other plugins
  ]

and thanks @mailaneel

I have following in the config:

  devServer: {
    contentBase: "./src/www",
    noInfo: true,
    hot: true,
    inline: true
  }

The browser shows following log:

bundle.js:117 Uncaught Error: [HMR] Hot Module Replacement is disabled.
webpack-dev-server.js:1 [WDS] Hot Module Replacement enabled.

Running webpack-dev-server with --hot --inline does also not help.

See this note in the docs

There are two options to fix it:

Option 1) add new webpack.HotModuleReplacementPlugin() to your plugins array in your webpack config

Option 2) pass the --hot command line option when launching webpack-dev-server

I am seeing this error as well. Passing --hot --inline to the command line fixes it.

The year is 2019, still when trying to set up dev-server and HMR following the documentation, I’ve stumbled upon this issue.

The explanation and actual behavior (when hot and inline options work only through the CLI, but not through the config) is extremely weird and counter-intuitive for people not familiar with how things work internally.

Could we remedy the situation somehow?

We should at least update the documentation to explain this more clearly. It’s really bad when new user have to read through the issues in order to configure a pretty basic set up.

I was getting the error until I removed the hot: true from my config. Unfortunately now I’m looking for a good way to disable the effect of adding the new webpack.HotModuleReplacementPlugin() to the loaders array. I may just extract the array and build it before exporting the webpack config module.

Edit: I just javascripted my problem away. The webpack2 docs do a better job of explaining what options are CLI-only, and what inline does etc.

I’m getting this error as well.

In response to https://github.com/webpack/webpack/issues/1151#issuecomment-343800515 and https://github.com/webpack/webpack/issues/1151#issuecomment-453764353, I actually need to do both:

1. add new webpack.HotModuleReplacementPlugin() to my plugins array in my webpack config
2. pass the --hot command line option when launching webpack-dev-server.

Also, I find it strange that I cannot use devServer: {hot: true} or devServer: { hotOnly: true} in webpack.config.js (it refuses to the load the webpage in the first place). This seems to contradict the documentaiton which appears to say that that devServer: {hot: true} and --hot are the same.

So, I had the new webpack.HotModuleReplacementPlugin() line in my plugins array, but I found HMR wasn’t working (throwing [HMR] Hot Module Replacement is disabled error) unless I passed the --hot --inline options in the CLI. I moved the HMR Plugin to be the first in the plugins array, and now it works without the CLI options! So for anyone that sees this, try that if it’s not working for you.

@mailaneel Thanks!+1

I change from devServer stuff on the webpack config into --hot --inline in the CLI command and works perfectly. Also, using a express and handling the webpack config works too…

The docs are wrong… 😢

Just use webpack-dev-server --hot --inline and don’t anything special about webpack-dev-server or HMR to your webpack.config.js.

Thanks so much for this - hours wasted here trying to figure out why live reload wasn’t working…

I tried some methods but didn’t work ，zzz

perfectly solved my problem

I bumped in similar issue. Wondering why the build file is expecting HMR. This is what i see in console while using the build file

main.js:3 Uncaught Error: [HMR] Hot Module Replacement is disabled.

My config file

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const distDir = 'dist';

function dirPath(dest){
  return path.resolve(__dirname, dest);
};

function webPath(dest){
  return dirPath('./' + dest);
};

const config = {
  entry: [
    webPath('scss/style.scss'),
    webPath('main.js')
  ],
  output: {
    path: process.env.NODE_ENV === 'production' ? dirPath(distDir) : dirPath('build'),
    filename: 'js/[name].js'
  },
  module: {
    loaders: [{
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('style', 'css!sass')
    },
    {
      test: /\.css$/,
      loader: "style!css"
    },
    {
      test: /\.(png|jpg|jpeg|gif|woff)$/,
      loader: 'url-loader?limit=1000'
    },
    {
      test: /\.js?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        compact: true,
        presets: ['es2015']
      }
    }]
  },
  plugins: [
    new ExtractTextPlugin('css/style.css'),
    new HtmlWebpackPlugin({
      template: webPath('index.html'),
      inject: 'body'
    })
  ],
  devServer: {
    quite: false,
    noInfo: false,
    stats: {
      assets: false,
      colors: true,
      version: false,
      timings: false,
      chunks: false,
      chunkModules: false
    }
  }
};

if(process.env.NODE_DEV === 'production'){
  config.plugins.push(
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      },
      minimize: true
    })
  );
} else {
  config.entry.push(
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080'
  );
}

module.exports = config;

My package.json scripts

"scripts": {
    "start": "webpack-dev-server --devtool eval --progress --colors --hot --inline --content-base build",
    "deploy": "NODE_ENV=production webpack -p"
  },

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
  context: path.join(__dirname, "/"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: ["webpack/hot/dev-server", "./src/start.jsx"],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/build/js/",
    filename: "script.js",
    publicPath: "/build/js/"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

Here is my webpack config. I have following folder structure:

-app
  -build
    -js
       -script.js
  -src
    -start.js

I am compiling start.js in ‘src’ folder to ‘script.js’ in ‘build/js’ folder.

Running it with webpack is compiling exactly as I intended, however running webpack-dev server as:

webpack-dev-server --content-base ./build --hot --inline

is not doing as intended. However, in terminal it is showing compilation.

@mailaneel Thanks! Your solution works!