React Hot Loader 3 no working with this boilerplate

[alphiii]

trafficstars

Let me say that this is awesome repository/boilerplate for django and react. I noticed that when I updated react hot loader this does not work any more.

The following modules couldn't be hot updated: (They would need a full reload!)

I tried to play around a bit, but with out any luck if any1 has a solution please let me know.

[dominik000]

You need to add the headers option to WebpackDevServer in file server.js the updated code looks like that:

var webpack = require('webpack') var WebpackDevServer = require('webpack-dev-server') var config = require('./webpack.local.config')

new WebpackDevServer(webpack(config), { publicPath: config.output.publicPath, hot: true, inline: true, historyApiFallback: true, headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET", "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization" } }).listen(3000, config.ip, function (err, result) { if (err) { console.log(err) }

console.log('Listening at ' + config.ip + ':3000') })

[acidSnakej]

Thank you!

[LukeVideo]

Thats not quite enough to make it work for me. I get these messages but nothing happens. Frustration ! XD

`` [WDS] Hot Module Replacement enabled. client?4854:37 [WDS] App hot update... 2 client?4854:37 [WDS] App updated. Recompiling... client?4854:37 [WDS] App hot update... 2 client?4854:37 [WDS] App updated. Recompiling... client?4854:37 [WDS] App hot update...

[KyleLawson16]

You need to restart your node server after adding the headers option. Just a tip ;)

[melboz]

Adding headers to WebpackDevServer did not really work for me. I had to add if (module.hot) { module.hot.accept(); } to App1.jsx. Anybody knows if I am missing sth?

[mlrocks]

Adding watchOptions solved the problem for me. My server.js looks like this now:

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.local.config')

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  inline: true,
  historyApiFallback: true,
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET",
    "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
  },
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  },
}).listen(3000, config.ip, function (err, result) {
  if (err) {
    console.log(err)
  }

  console.log('Listening at ' + config.ip + ':3000')
})

Great tutorial!! Thanks.