Switch to react-hot-loader v3

[justingreenberg]

fall cleaning... maybe we should remove babel-preset-hmre as it relies heavily on the now deprecated https://github.com/gaearon/react-transform-hmr the question is: how important is maintaining local (react) component state between HMR reloads?

options:

• try to implement React Hot Loader 3 (but... Status/Roadmap of the project gaearon/react-hot-boilerplate#97 (comment))
• use vanilla webpack HMR (will lose local component state between HMR reloads)

edit: also see https://github.com/danmartinez101/babel-preset-react-hmre/issues/46

[mxstbr]

We should switch to React Hot Loader v3 as soon as it's stable, but I don't see why we shouldn't stick with our current setup for now as it currently works perfectly fine?

[MoOx]

If I am correct, without RHL v3 you don't have hot loading for functional components.

[mxstbr]

That's true. Does RHL v3 at this state already have support for functional components?

[MoOx]

Yeah, I am using it for a few months and it's perfect for me. Also included in Phenomic for a while and nobody reported any issue about it :)

[mxstbr]

Alright, let's switch to RHL v3 then!

[kachkaev]

Hi guys,

I came up with a question and decided to ask it here since it's related to how the app is being reloaded. When editing certain parts of the app like redux actions, we all constantly see the following message in the browser's console: [HMR] The following modules couldn't be hot updated: (Full reload needed). This is normally followed with a manual page refresh.

I once tried create-react-app and got used to their robust cold reloading every time a JS file changes. So after going back to this boilerplate, I started to feel lazy going back to the browser from time to time after seeing a long yellow message in the corner of the dev tools.

I'm wondering how hard would it be to optionally enable cold reloading when HMR has failed. I know that this would imply the loss of states, but this is not a problem if redux store is persisted.

Could anyone suggest how to trigger a full reload? Just spent > 1hr on this and gave up :-)

[manelpb]

@kachkaev try to create your components using React.Component instead. It will auto reload

[kachkaev]

@manelpb yeah I know that I can use React.Component instead of React.PureComponent or functions, but that potentially creates performance problems. Even if I do so, there will be still cases when webpack won't be able to reload itself and show me that yellow please refresh message in the console. I'm just wondering how I can automate this refresh.

[jptissot]

I don't have a complete example of this at hand (only private project code) but I was able to use Webpack 2.2 and RHL3 with this boilerplate. It required some moving of code a bit but It works great !

[MichaelIT]

I am trying use RHL3 in dev branch, But I get some error like @kachkaev . I have spend about 4 hour to google and fix it.But I am faild.Every time I change any component ,it will reload page. 😢

[kai23]

Same as @MichaelIT here, can't make it working.

[kachkaev]

Here is what helped in old webpack #1357

Maybe there is an alternative in v2?

[kai23]

I'm back to the old hmre for the moment, it doesn't work on everything but it's sill better than nothing. I'm waiting for the 3.5 to see if something changes.

[kai23]

I'm back to the old hmre for the moment, it doesn't work on everything but it's sill better than nothing. I'm waiting for the 3.5 to see if something changes.

[Dattaya]

Fixed in #1871

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.