Hot Module Replacement is disabled.の対処方法

フロントエンドの開発にwebpackを使用する場合、一緒に開発用にwebサーバーも立てる場合があります。
サーバーの建て方も色々ありますが、webpackの公式のライブラリであるwebpack-dev-serverを使う機会が多いのではないでしょうか?

GitHub - webpack/webpack-dev-server: Serves a webpack app. Updates the browser on changes.

今回は、webpack-dev-serverのHot Module Replacementと言う機能を使ったときに発生した事例についての説明です。

この記事で得られる事

  • 「Hot Module Replacement is disabled.」というエラーの対処法がわかる。
  • 公式のチュートリアル「Hot module replacement」が、なんかうまくいかない時に解決するかもしれない。

イントロダクション

構成

.
├── src
│   └── main.js
├── dist
│   └── <ビルドしたファイル>
└── webpack.conf.js 

ファイルの内容

webpack.conf.js

confファイルは下記のように、distディレクトリをリサーブして表示する処理が書かれています。

const path = require('path');

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, '../dist')
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    port: 9000
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
};

package.json

scriptsの部分のみですが、webpack.conf.jsを読み込む指定しています。

"scripts": {
    "start": "webpack-dev-server --open  --config ./webpack.conf.js",
 },

事象

webpack.conf.jsのdevServerに、hotオプションを追加して、Hot Module Replacement(以下、HMR)を有効にしようとしました。

const path = require('path');

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, '../dist')
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    port: 9000,
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
};

npm run startで実行してブラウザで確認したところ、何も要素が表示されませんでした。
chromeで表示確認をしていたので、consoleを確認したところ次のエラーが発生していました。

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

解決方法

webpack-dev-serverでHMRを有効にする場合は、--hotオプションを設定する必要があります。

DevServer

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.


また、HMRの場合は、inlineモードが推奨されているようなので、--inlineを追加します。

Inline mode is recommended for Hot Module Replacement as it includes an HMR trigger from the websocket. Polling mode can be used as an alternative, but requires an additional entry point, 'webpack/hot/poll?1000'.

結論

"scripts": {
    "start": "webpack-dev-server --open  --hot --config ./webpack.conf.js",
 },