React module is not hot updated after my upgrade of webpack to v2 and webpack-dev-server to v2

[vivaxy]

If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

Description

React module is not updated, after I edited ./src/components/DemoButton.js, changed something.

Expected behavior

Modules updated.

Actual behavior

Update traces are correct.

Breakpoints in render method was called. But nothing happened in DOM tree.

Environment

React Hot Loader version: 3.0.0-beta.6

Run these commands in the project folder and fill in their results:

1. node -v: v6.6.0
2. npm -v: 3.10.3

Then, specify:

1. Operating system: macOS
2. Browser and version: Chrome 55.0.2883.95 (64-bit)

Reproducible Demo

https://github.com/vivaxy/gt-react-scaffold/tree/db4a02582452772ac4533b3b0f199e831f339578

[vivaxy]

It worked fine after I removed react-router.

[nikolaipaul]

@vivaxy what are you using instead of react-router? I'm hitting the same problem.

[vivaxy]

@nikolaipaul It's not fixed. I removed react-router just to find out what part causes this problem.
It seems this bug is regarding to react-router hot reload support. I have added hack code to accept router hot reload. But this doesn't work after my upgrade to webpack@2.x.

[bjudson]

Having the same problem with React Router v3.0.2 (Webpack 2.2.1, react hot loader 3.0.0-beta.6). I also see the warning:

Warning: [react-router] You cannot change <Router routes>; it will be ignored

[bjudson]

@vivaxy @nikolaipaul this fixed my issue, have you tried it? #240 (comment)

i currently have:

renderApp(Root)

if (module.hot) {
    module.hot.accept(() => {
        renderApp(Root)
    })
}

rather than module.hot.accept('./containers/root', () => {

[vivaxy]

@bjudson I tried, It's still not working. I've noticed that repo does not use react-router.
And if you want to fix react-router warning, you might have to try this.

[bjudson]

Not too concerned about the warning, as long as it works :)

I am using react-router, and above fix worked for me. Not really sure react-router was my problem though.

[wkwiatek]

I think problem is related to RR v3, and we have an issue for that: #288.

Please feel free to reopen if there's something more. Thanks!

[vivaxy]

It just worked after my several updates.
I still didn't work out why it worked.

[andyearnshaw]

I've had the same issue without react-router. @bjudson's fix worked for me, are there any downsides to using this?

[Igor-Gold]

I didn't have react-router installed at all while implementing react-hot-loader.

@bjudson's solution worked for me.

I think this issue should be reopened @wkwiatek.

[wkwiatek]

@andyearnshaw @IgorGee could you share some repository with minimal reproduction scenario?

I'll try to understand why you needed to add such a workaround.

In case of code from @akoskm and @bjudson (#240 (comment)) it should not be needed as the path says to webpack which code should be allowed to hot update. If you remove that path, then every change from outside will also cause hot update instead of full reload which potentially can have unexpected results.

[Igor-Gold]

@wkwiatek sure, here ya go: react-boilerplate

Edit: To reproduce:

replace line 17

if (module.hot) module.hot.accept('./components/App', () => render(App))

and then try to change any text within App or Title