Webpack-hot-middleware: What causes this problem `The following modules couldn't be hot updated: (Full reload needed)`

[leecade]

[glenjamin]

I'd need to see some example code and whichever modules were listed to provide more information.

In general this means that the modules in question have changed but are not hot reloadable.

See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more information

[leecade]

@glenjamin thanks, I still can't locate the reason now

[leecade]

@glenjamin

Very strange, same devServer.js, works fine when I call node devServer.js,

But If a call it in gulp.babel.js, like:

const devServer = port => {

  var devServer = require('./devServer.js')

  /*var express = require('express');
  var webpack = require('webpack');
  var config = require('./webpack/webpack.config.dev.js');

  var app = express();
  var compiler = webpack(config);

  app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
  }));

  app.use(require('webpack-hot-middleware')(compiler));

  app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname,req.path));
  });

  app.listen(3000, 'localhost', function(err) {
    if (err) {
      console.log(err);
      return;
    }

    console.log('Listening at http://localhost:3000');
  });*/


}
// task: dev
gulp.task('dev', [], done => devServer(ports.dev))

This cause the problem The following modules couldn't be hot updated: (Full reload needed), can not auto reload in browser.

The follow file is my devServer.js, any help, thanks

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack/webpack.config.dev.js');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, req.path));
});

app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:3000');
});

[glenjamin]

I can't see a reason this would vary with use of gulp.

Which modules does it say cannot be reloaded? This is usually a client-code or webpack problem when it happens

[leecade]

@glenjamin oh I have found the reason.

If devServer called by gulp, babel-loader won't use the config in .babelrc, not sure why..

Maybe because gulp use external module babel-core/register

The solution is simple, just move the config which in .babelrc to webpack.config.dev.js

loaders: [{
      test: /\.jsx?$/,
      loader: 'babel',
      query: {
        'stage': 0,
        'plugins': ['react-transform'],
        'extra': {
          'react-transform': {
            'transforms': [{
              'transform': 'react-transform-hmr',
              'imports': ['react'],
              'locals': ['module']
            }, {
              'transform': 'react-transform-catch-errors',
              'imports': ['react', 'redbox-react']
            }]
          }
        }
      }
    }]
  }

This change make webpack-hot-middleware stronger to avoid the other similar problems

[zhongzhi107]

Add following code in your entry.js

if (module.hot) {
  module.hot.accept();
}

[cloudfroster]

@zhongzhi107 i find the same issue, if i dont add:

if (module.hot) {
  module.hot.accept();
}

module will not reload,it will tell me:

[HMR] The following modules couldn't be hot updated: (Full reload needed)

and, if i added, that ok. i just konw why? is it must be add on every entry file? THX

[glenjamin]

The webpack documentation discusses how webpack decides what is hot reloadable.

http://webpack.github.io/docs/hot-module-replacement-with-webpack.html

[adam-beck]

I'm in the same boat as all of you with needing to use module.hot.accep(). @glenjamin I've read over those docs multiple times but I guess I'm just not smart enough to understand what exactly I'm reading.

The following repo may not be the best representation because it is using Hapi and a Hapi plugin that proxies webpack-hot-middlware but the same problem mentioned above still persists.

https://github.com/adam-beck/hapi-plz

[glenjamin]

@adam-beck The docs aren't the best, http://webpack.github.io/docs/hot-module-replacement.html might also be helpful.

By default modules are not hot reloadable. To allow them to hot reload, you have to add some code that knows how to "Accept" the new code and apply it to replace the old code.

One way to do this is to manually write a little bit of code that interacts with module.hot. The other way to do this is to use a loader or some other transform to insert this code for you automatically.

The style-loader can do this for the <style> tags it inserts to hold CSS.

To get this effect with React components, people often use react-transform along with react-transform-hmr. This babel preset can be used for easy configuration: https://github.com/danmartinez101/babel-preset-react-hmre/

[adam-beck]

You know I was able to get that to work successfully but I was under the impression that wasn't needed. And that is what I was trying to avoid since react-transform-hmr says that it's very experimental (but I guess so is Webpack HMR in general). I will take another look at that.

But thank you for spending the time to help with my problem! Things are finally starting to click for me.

[sir-marc]

if (module.hot) {
  module.hot.accept();
}

worked for me, but since i switched to typescript, i could not use module throwing cannot find name module

[apurvgandhwani]

When I add this, my browser console shows "module is up to date" after any change I made in component, but nothing changes in view (browser)

[xiehurricane]

the same as @apurvgandhwani

[glenjamin]

https://github.com/glenjamin/webpack-hot-middleware/issues/43#issuecomment-210814582 Is the best advice I have.

Adding module.hot.accept() means you're telling webpack the module can handle being hot reloading, but not actually doing anything.

[srrvnn]

@apurvgandhwani, and @xiehurricane: i had the same issue and everything worked fine once i added the react-hot to the array with the babel loader. as @glenjamin mentioned react-hot-loader actually does the transform, i'd guess.

[junibrosas]

@sir-marc

you can add this on your index.ts file

declare var module:any;