Hot reloading is not working

[Drathal]

Hot reloading of components is broken right now, though Styles will update correctly.

[bsr203]

You might have seen this posts, still just for your info.

I found hot reloading most of the time is broken and I had lost confidence in it and reload all the time. Dan also had few posts about it, and not sure just using plain webpack HMR is better.

https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf#.somfrw9yk

Solution: Use Vanilla HMR If You Can
This is a straightforward one.
As James Kyle suggested, if you keep all your state in a single store like Redux, and don’t care too much about preserving the DOM on reloads, consider dropping React Transform and using vanilla HMR or something like isolated-core.
It will make your project simpler!

Dan made an update to this post about ver 3

Note: React Hot Loader 3, released a month after I published this article, solves most of the problems described in this post. Give it a try!

not released yet and not sure the plans.

reduxjs/redux#1455

this pull request has few boilerplates with react hot boilerplate 3, like
https://github.com/ctrlplusb/react-universally

[bsr203]

also https://github.com/glenjamin/webpack-hot-middleware

[bsr203]

sorry, just saw you uses react-hot-loader@3.0.0-beta.2 . so, indeed you are aware :-)

[Drathal]

Thanks for your efforts.

I have broken hot reloading with the async loading of components in the routes. I think i just have to require all route components in development mode and load them async in production mode. Had no time to try that out. react-hot-loader cannot load modules async right now.

[bsr203]

thanks. I too not in quite need of it now. today was migrating my project to use all the goodies from your setup. thanks again for sharing it.

[bsr203]

Hi. I tried to implement it based on this boilerplate https://github.com/mgcrea/react-webpack-factory

I tried with wrapping the root component in AppContainer, and it gives message The following modules couldn't be hot updated: (They would need a full reload!) for even simple presentation components.

import { AppContainer as HotLoaderContainer } from 'react-hot-loader';
...
React.render(
      <HotLoaderContainer>
        {component}
      </HotLoaderContainer>,
      document.getElementById('root')
    );

I tried with webpackDevMiddleware and webpackHotMiddleware like in react-webpack-factory, in that case there is no warning, but component never reloaded.

just for your info, and you may find some ideas from this repo.
thanks.

[Drathal]

@bsr thanks for your effort in this. I played around a bit and found out that i had 2 issues that prevented react-hot-reloader from working:

1. in my src/root.js module i have to use a es6 component (bug in react-hot-reloader), the first component (root component) cannot be a stateless functional component
2. dynamic loading of routes also breaks hot reloading.

i fixed booth problems in 9b2fdb4. Hope that was all, but it seems to be woking

[bsr203]

great to hear it is working. I don't use dynamic loading and could make it work with help from some other repo. will find it out if you need a reference.

But, I see only NavLinks.spec.js in this commit :-)

[bsr203]

things are moving crazy in JS land :-) now I am making snapshot testing to work properly
react-boilerplate/react-boilerplate#825
It is not difficult, but everything adds to the complexity mix :-)

[Drathal]

@bsr yeah i edited the message ;D There was a wrong commit hash in it ;D

[Drathal]

@bsr i will take a look into snapshot testing. Don't know about it yet :)

[bsr203]

there is a live session by the author in about 2 hrs, if you are interested,https://www.facebook.com/events/285156468510102/?active_tab=posts

[Drathal]

@bsr203 cool thanks for the link