I've looked around, but can't get any of the answers I've seen on stackoverflow to work.

I cannot use the mand line for webpack or the webpack dev-server; I am restricted to using the Node API.

Below is how I am using webpack.

webpack.config.js

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    // i've also tried webpack/hot/dev-server here
    'webpack/hot/only-dev-server',
    path.join(__dirname, 'src', 'js', 'app.jsx')
  ],
  output: {
    path: path.join(__dirname, 'dist', 'js'),
    filename: 'script.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [{
      test: /\.(js|jsx)$/,
      loaders: ['react-hot', 'babel']
    }]
  },
  plugins: []
};

contained in a gulp task "start"

gulp.task('start', function (callback) {
  var config = Object.create(require('webpack.config.js'));
  config.plugins.push(new webpack.HotModuleReplacementPlugin());

  var devServer = new webpackDevServer(webpack(config), {
    stats: { colors: true },
    contentBase: path.resolve(__dirname, 'dist'),
    progress: true,
    inline: true,
    hot: true
  });
});

What I expect

When I run gulp start, I expect the webpack dev server to spin up, allowing me to hit localhost:3000/. This should load an index.html from my project's /dist/ folder. So far so good. I expect that when I make a change to a file (e.g., app.jsx), that the change would be present.

What is actually happening

I am getting the error "[HMR] Hot Module Replacement is disabled", with no further explanation.

Any help would be appreciated. I have been trying to get hot reloading working for a full day.

I've looked around, but can't get any of the answers I've seen on stackoverflow to work.

I cannot use the mand line for webpack or the webpack dev-server; I am restricted to using the Node API.

Below is how I am using webpack.

webpack.config.js

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    // i've also tried webpack/hot/dev-server here
    'webpack/hot/only-dev-server',
    path.join(__dirname, 'src', 'js', 'app.jsx')
  ],
  output: {
    path: path.join(__dirname, 'dist', 'js'),
    filename: 'script.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [{
      test: /\.(js|jsx)$/,
      loaders: ['react-hot', 'babel']
    }]
  },
  plugins: []
};

contained in a gulp task "start"

gulp.task('start', function (callback) {
  var config = Object.create(require('webpack.config.js'));
  config.plugins.push(new webpack.HotModuleReplacementPlugin());

  var devServer = new webpackDevServer(webpack(config), {
    stats: { colors: true },
    contentBase: path.resolve(__dirname, 'dist'),
    progress: true,
    inline: true,
    hot: true
  });
});

What I expect

When I run gulp start, I expect the webpack dev server to spin up, allowing me to hit localhost:3000/. This should load an index.html from my project's /dist/ folder. So far so good. I expect that when I make a change to a file (e.g., app.jsx), that the change would be present.

What is actually happening

I am getting the error "[HMR] Hot Module Replacement is disabled", with no further explanation.

Any help would be appreciated. I have been trying to get hot reloading working for a full day.

• javascript
• reactjs
• webpack
• hot-module-replacement

Share Improve this question Follow asked Sep 8, 2016 at 23:37 coolpic.jpg.execoolpic.jpg.exe 3111 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

in your webpack.config.js on the plugins section try this,

plugins: [new webpack.HotModuleReplacementPlugin()]

I know you are pushing the plugin in your gulp task but you have to use --hot --inline on cli or on your npm script

Try to run webpack as webpack-dev-server --hot --inline in packge.json, somehow official docs is wrong now.