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. 
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 “;” to the top level file that initialized the application (note that this file also doesn’t export anything).

See this:

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

And CommentBox.jsx:

var React = require('react');
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
module.exports = CommentBox;

And my webpack config:

var path = require('path');
var webpack = require('webpack');
module.exports = {
  entry: [
  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/';
(function() {
  var webpack = require('webpack');
  var webpackConfig = 
      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);
  res.sendFile(path + "index.html");
  res.sendFile(path + "dropzone.js");
  res.sendFile(path + "404.html");
if (require.main === module) {
  var server = http.createServer(app);
  server.listen(process.env.PORT || 1616, function() {
    console.log("Listening on %j", server.address());
  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 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 *