Fixing “The following modules couldn’t be hot updated”, “Full reload needed”

I wrote a small React application to test hot loading components using webpack-hotmiddleware, and received the following error:

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

This is usually because the modules which have changed 
(and their parents) do not know how to hot reload themselves. 
See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html 
for more details.

process-update.js:69 [HMR]  - ./src/CommentBox.jsx

There are details here but it took me a bit to figure out the answer – the solution was to add “module.hot.accept();” to the top level file that initialized the application (note that this file also doesn’t export anything).

See this:
client.js:

var React = require('react');
var ReactDOM = require('react-dom');
var CommentBox = require('./CommentBox.jsx');

ReactDOM.render(
  React.createElement(CommentBox, null), 
  document.getElementById('container')
);

module.hot.accept();

And CommentBox.jsx:

var React = require('react');
    
var CommentBox = React.createClass({
  render: function() {
    return (
      
test
); } }); module.exports = CommentBox;

And my webpack config:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
    './src/client'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  devtool: '#source-map',
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.jsx$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

My index.js file for express has this:

'use strict';

var express = require("express");
var http = require("http");
var app = express();
var router = express.Router();
var path = __dirname + '/views/';

app.use(express.static('public'));

(function() {
  var webpack = require('webpack');
  var webpackConfig = 
    require(
      process.env.WEBPACK_CONFIG ? 
      process.env.WEBPACK_CONFIG : './webpack.config'
    );
  var compiler = webpack(webpackConfig);

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

  app.use(require("webpack-hot-middleware")(compiler, {
    log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000
  }));
})();


router.use(function (req,res,next) {
  console.log("/" + req.method);
  next();
});

router.get("/",function(req,res){
  res.sendFile(path + "index.html");
});

router.get("/dropzone.js",function(req,res){
  res.sendFile(path + "dropzone.js");
});

app.use("/",router);

app.use("*",function(req,res){
  res.sendFile(path + "404.html");
});

app.use(require('morgan')('short'));

if (require.main === module) {
  var server = http.createServer(app);
  server.listen(process.env.PORT || 1616, function() {
    console.log("Listening on %j", server.address());
  });
}

app.listen(3000,function(){
  console.log("Live at Port 3000");
});

7 Replies to “Fixing “The following modules couldn’t be hot updated”, “Full reload needed””

  1. Thanks Gary!
    This has helped me very much!

    In my application, we were using
    module.hot.accept() method with a parameters. I tried the bare one and it worked

  2. Hey, it would be cool if you could put the working project somewhere, I feel like there is no simple up to date project to build uppon.

  3. I hadn’t realized that the app was actually updating if I changed the code inside any react component but the problem was when I wanted to hot reload out side of the root component. Thanks man, this helped me a lot!!

Leave a Reply

Your email address will not be published. Required fields are marked *