react-hot-loader: Hot reload not working with webpack2 and react-hot-loader3

I solved a similar problem.

I had the issue with hot.module.accept not triggering when I switched to webpack2. I simply saw nothing relating to HMR in the console, but WDS printed the normal stuff about "App updated. Recompiling..."

I had to simply update to webpack2: npm install webpack-dev-server@beta --save-dev

Previously I was running ^1.16.2. Perhaps someone else here has done the same mistake.

Found the root of the problem:

My index.js imported routes too, and it probably messed the dependency tree. I removed it from there. Now everything works. So I suggest checking what is being imported.

Hi there. Trying to setup from scratch I’ve got one problem - HMR logs is OK in console, but browser content doesn’t updates.

https://cl.ly/212B1i3G420N

I’m runing webpack-dev-server CLI with --hot --inline options.

@ElForastero did you figure it out?

@calesce I’ve pushed a new version with fixes (and a shrinkwrap file to make sure that the dependencies are going to be the same). I found out that not my module.hot.accept('./components/DevAppRoot', () => { gets called but instead if I add a module.hot.accept('../common/routes/create', () => { that handler gets called (that file assembles my route config). Is that the intended behaviour? Do i need to re render the application if my route file gets changed?

Edit I just tried re-rendering my app within that callback but my output just changes to:

[HMR] Waiting for update signal from WDS...
app-e7eec7c….js:39705 [WDS] Hot Module Replacement enabled.
2app-e7eec7c….js:39705 [WDS] App updated. Recompiling...
app-e7eec7c….js:39705 [WDS] App hot update...
app-e7eec7c….js:39871 [HMR] Checking for updates on the server...
app-e7eec7c….js:39842 Ignored an error while updating module 517 (accept-errored)
app-e7eec7c….js:96808 [HMR] Updated modules:
app-e7eec7c….js:96810 [HMR]  - 533
app-e7eec7c….js:96810 [HMR]  - 538
app-e7eec7c….js:96816 [HMR] Consider using the NamedModulesPlugin for module names.
app-e7eec7c….js:39852 [HMR] App is up to date.

But the component itself is still showing the old content.

@pgsandstrom I had been wresting with this issue on and off for a couple of days now. Thanks for the tip, after I switched to webpack-dev-server@beta everything started to work.

EDIT: I actually upgraded to webpack-dev-server@2.3 based on @jquintozamora’s comment and everything still works fine.

@pgsandstrom thanks!! In fact, since yesterday you can do just npm install webpack-dev-server --save-dev and will be installing version 2.2.1.

Hi all;

react-router v4 definitely plays a lot nicer with HMR!

I have an example set up in my code-split-component module that shows usage of RR4 with RHL3, and it includes code splitting using Webpack 2’s System.import API.

---

_Update_: turns out I didn’t have the babel plugin included in my example above. Unfortunately RHL3 doesn’t play nicely with the declarative CodeSplit component. It requires you to update a component twice and then only shows the previous update. Every subsequent update hot reloads the previous update. I’ve had to remove RHL3 from my example, so it won’t be much use to many. Sorry.

So here are my findings:

I had routes.js file that looked like

import React from 'react'
import { Route, IndexRoute } from 'react-router'
import Home from './components/Home'

const routes =
  <Route path="/" component={Home} />

export default routes

And Root.js

import React, { Component } from 'react'
import { Router, browserHistory } from 'react-router'
import routes from '../routes'

const Root = () =>
  <Router
    history={browserHistory}
  >{routes}</Router>

This combination led to unaccepted state of a module, because for some reason the module queue (on webpack side) had the one with the _main in it.

Seemed like the import Home from './components/Home' in the routes was actually the key to this failure. I moved all the routes to Root and it works.