Uncaught Error: [HMR] Hot Module Replacement is disabled

Question

I'm using webpack for my build which works without any problems using the webpack-dev-server (npm run watch), however when I try to create a production build (npm run build) I seem to get the error in the console when I try to load the website and nothing shows up at all on-screen.

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

I have a few questions about this:

1. My understanding of using Hot Module Replacement is that its designed for making life easier during development, it should not be used in production deployments. Is that correct?

2. Given the below, why is Hot Module Replacement is being used? I don't see what's driving it.

3. What's the best practice when it comes to production builds, should I have a separate webpack config for prod and dev? Ideally I'd like to make use of a single config purely to ease maintenance.

package.json

{
  // ...
  "scripts": {
    "build": "webpack --progress --colors --production",
    "watch": "webpack-dev-server --inline --hot --progress --colors"
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
    "bootstrap-sass": "^3.3.6",
    "bootstrap-webpack": "0.0.5",
    "extract-text-webpack-plugin": "^1.0.1",
    "html-webpack-plugin": "^2.15.0",
    "jquery": "^2.2.3",
    "node-sass": "^3.4.2",
    "react": "^15.0.1",
    "react-bootstrap": "^0.28.5",
    "react-dom": "^15.0.1",
    "react-redux": "^4.4.1",
    "react-router": "^2.0.1",
    "react-router-redux": "^4.0.1",
    "redux": "^3.3.1",
    "redux-thunk": "^2.0.1",
    "webpack": "^1.12.14"
  },
  "devDependencies": {
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.23.1",
    "exports-loader": "^0.6.3",
    "file-loader": "^0.8.5",
    "imports-loader": "^0.6.5",
    "less": "^2.6.1",
    "less-loader": "^2.2.3",
    "redux-devtools": "^3.2.0",
    "redux-logger": "^2.6.1",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
    entry: [
        'webpack/hot/only-dev-server',
        path.resolve(__dirname, 'app/index.js')
    ],
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: [ 'es2015', 'react' ] } },
            { test: /\.scss$/, loader: 'style!css!sass?includePaths[]=' + path.resolve(__dirname, './node_modules/bootstrap-sass/assets/stylesheets/') },
            { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file' }
        ]
    },
    resolve: {
        modulesDirectories: ['node_modules']
    },
    plugins: [
        new webpack.NoErrorsPlugin(),
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
            inject: false
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new webpack.optimize.OccurenceOrderPlugin()
    ]
};

Althaalthea

Answer 1

It's not a particularly good idea to include the hot loading bits in a production build. They are practically useless there and just bloat your file size.

There are multiple strategies on how to deal with this. Some people separate their webpack configuration per file and then point to it through --config. I prefer to maintain a single file and branch through npm. I use webpack-merge to share configuration between branches (disclaimer: I'm the author).

Hiroko

thanks for this info - the webpack-merge looks very useful, however I'm not clear on what's actually triggering HMR to be included in my build at present so separating that component out is proving tricky - any ideas based on the above? – Althaalthea

You have included webpack/hot/only-dev-server to your entry configuration. That brings in the client component of HMR. – Mince

No probs. I see you are using webpack-dev-server in --inline mode so you can probably even skip that entry point even during development usage. – Mince

Answer 2

You need to enable the HMR plugin. Add the HotModuleReplacementPlugin to your plugins array in you webpack.config. You can have a separate webpack.config for dev and production.

Something like

 plugins: [
    new webpack.NoErrorsPlugin(),
    new htmlWebpackPlugin({
        filename: 'index.html',
        template: './index.html',
        inject: false
    }),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
]

Kreda

Answer 3

I got this error due to the fact that I had code like this in webpack.config.js.

devServer: {
    ...
    hot: true,
    inline: true
}

Used the command webpack-dev-server --hot --inline instead and then I did not have to bloat my config with new webpack.HotModuleReplacementPlugin().

https://github.com/webpack/webpack/issues/1151#issuecomment-111972680

Hendley

Answer 4

You will need to enable Hot Module Replacement feature to have it working e.g:

webpack.config.js

module.exports = {
  //...
  devServer: {
    hot: true
  },
  plugins: [
    //...
    new webpack.HotModuleReplacementPlugin()
  ]

};

From webpack: Note that webpack.HotModuleReplacementPlugin is required to fully enable HMR. If webpack or webpack-dev-server are launched with the --hot option, this plugin will be added automatically, so you may not need to add this to your webpack.config.js. See the HMR concepts page for more information.

As said, otherwise you can enable it through package.json add --hot to your script e.g.

"start": "webpack-dev-server --hot",

Cerys