Tag: react

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");
});