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

[fkrauthan]

I updated my small project to webpack2 and switched to react-hot-loader3 but now everytime I try to change a react component I just get the following output:

[HMR] Waiting for update signal from WDS...
app-7a88884….js:39514 [WDS] Hot Module Replacement enabled.
2app-7a88884….js:39514 [WDS] App updated. Recompiling...
app-7a88884….js:39514 [WDS] App hot update...
app-7a88884….js:39656 [HMR] Checking for updates on the server...
app-7a88884….js:39621 Ignored an update to unaccepted module 530 -> 535 -> 514 -> 1290
app-7a88884….js:96157 [HMR] The following modules couldn't be hot updated: (They would need a full reload!)
app-7a88884….js:96159 [HMR]  - 530
app-7a88884….js:96164 [HMR] Nothing hot updated.
app-7a88884….js:39637 [HMR] App is up to date.

Right now it does not even try do a full reload anymore. The Source code can be found here: https://gitlab.fkrauthan.de/simply-sailing/west-coast-sailing-club

Just run npm install in the web-ui folder and after that run npm start webpack:development

The file I try to change is in web-ui/src/common/modules/static/components/HomePage.js

[calesce]

There's a lot going on in your project, but one clear problem I see is here, where you're not re-requiring AppRoot (or DevAppRoot below) in the module.hot.accept callback.

[fkrauthan]

@calesce I know this project is not build as a simple project this is a boilerplate for a enterprise grade react application. The re reqeuire is not needed as I use the new webpack2 with es6 modules system (There is actual comments in this project that it is not needed). In addition I've added some console.log in the hot accept and that method never gets called.

[calesce]

Again, I haven't yet looked at this deeply, but if you're saying that module.hot.accept is never called, that's likely a Webpack HMR configuration issue, and not specific to RHL.

[fkrauthan]

It's just that the module id chane that the error message displays does not contain the module id of my DevAppRoot (which is the component that is rendered). Thats why I assume that its a react hot loader issue. It somehow looses track of my Root component (maybe because of react router?)

[calesce]

Ah, ok. Have you tried removing the React Router bits to try to isolate the issue and see whether it's the same problem as the other React Router issues?

[elado]

I'm having the same issue, seems like React Router is indeed causing it. When I use simple React components, hot reloading works well.

[elado]

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.

[elado]

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.

[hank7444]

@elado thank you! I have a same problem too!

[fkrauthan]

But that shouldn't be a problem? I thought react router is suppose to work in this way too? The old school way of hot reloading (using the babel plugin) was working perfect for this scenario.

[Ciantic]

I even removed react-router from my app, now my app is just two modules, and I still get these: Ignored an update to unaccepted module, the damnest thing is that I have another app where everything works. This is really hard to debug with the cryptic numbers just there.

[calesce]

@Ciantic can you share a simple repo showing the issue?

[elado]

cc @calesce

I just upgraded another project to latest beta (5). It's not reloading components that are directly or indirectly imported into the index.js file.

For example:

index.js

import X from './X'
import Root from './Root'

// render <AppContainer><Root /></AppContainer> etc.

X.js

import Y from './Y'

export function foo() { /* something */ }
export function bar() { return <Y /> }

Y.js

export default class Y extends Component {
  // react component
}

index needs X, and X depends on Y. In this case, updating Y won't cause a hot reload. It worked in the previous version.

[fkrauthan]

So the problem could be that my main.js file imports the routes and just passes them to my root component instead of my root component importing the routes?

[calesce]

@elado you'll need to add that to the array for module.hot.accept() and pass it into your root component, or add a separate module.hot.accept in another "root" file, like with Redux in their example.

@fkrauthan I'm not sure, but I wasn't able to clone, install and run your project, I got this error:

[elado]

@calesce thanks. Is this requirement new for 3-beta? Same code worked fine with 1.3.0.

[calesce]

@elado: for React components it wasn't required in 1.x because module.hot.accept was added to each "detected" component by the loader. It'd still be needed for non-React modules that aren't required by your Root component (or route config).

[fkrauthan]

@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.

[ctrlplusb]

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.

[ElForastero]

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.

[calesce]

@ElForastero A simple, runnable project would be more helpful.

[sylhero]

trying to separate vendor and app in the entry everything is fine but the reload.
`entry: {

   app: ['./src/client/app/main.jsx',
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server'
    ],
    vendor: ['./src/client/app/vendor.jsx',
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server'
    ]
}

[WDS] App updated. Recompiling...
client?843a:38 [WDS] App hot update...
dev-server.js?b7b7:45 [HMR] Checking for updates on the server...
log-apply-result.js?d762:20[HMR] Updated modules:
log-apply-result.js?d762:22[HMR] - ./node_modules/raw-loader/index.js!./src/client/app/widgets/index.html
log-apply-result.js?d762:22[HMR] - ./src/client/app/widgets/main.jsx
log-apply-result.js?d762:22[HMR] - 0
dev-server.js?b7b7:27 [HMR] App is up to date.

the only working combination I did is
entry: [ 'react-hot-loader/patch', './src/client/app/main.jsx', './src/client/app/vendor.jsx' ]

[calesce]

@sylhero I don't usually use multiple entry points, but doesn't the main.jsx and vendor.jsx ned to be last in the array?

[sylhero]

@calesce thanks for your reply! I just tried your suggestion but unfortunately I got the same problem everything is fine it just doesn't reload

[calesce]

@sylhero Hmm, looks like the relevant issue is #141. Maybe try importing react-hot-loader/patch at the top off main.jsx?

[sylhero]

@calesce after some experiments I finally found something that works for me now:
entry: {

    app: [
        'react-hot-loader/patch',
        './src/client/app/widgets/app.jsx',
        './src/client/app/widgets/index.jsx'
    ],
    vendor: [
        'react-hot-loader/patch',
        './src/client/app/widgets/vendor.jsx'
    ]
}

I deleted node_modules and update my npm to 4.0.1 now it works. Thanks for your help!

[calesce]

interesting, you left the devServer stuff out?

[fkrauthan]

@sylhero so your solution was to define the app.jsx plus your actual index.jsx in webpack? Instead of just the index.jsx (which in my opinion should be enough?)

[sylhero]

@calesce basically I followed the solution in this post #243 and for now I don't see the need to add webpack-dev-server stuff. Maybe I need to try more to confirm that

[sylhero]

@fkrauthan you are right. eventually I may merge them together. Now, it's just for testing multiple entrance + commonchunckplugin.

[gustavohenke]

I want to say that I noticed exactly the same as @ctrlplusb:

[...] It requires you to update a component twice and then only shows the previous update. Every subsequent update hot reloads the previous update.

If I swap System.import with require, then the hot reloading works just fine.

[pgsandstrom]

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.

[amerker]

@pgsandstrom That was a most excellent tip and cleared up many days of headache. Thanks!

[monochrome-yeh]

@pgsandstrom , thanks, it's simple way for solve my issue 👯

[jquintozamora]

@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.

[crisu83]

@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 [email protected] based on @jquintozamora's comment and everything still works fine.

[akhayoon]

I can also confirm that after upgrading to Webpack v2.2, react-hot-loader 3 stopped working.

Installing [email protected] restored functionality and everything is smooth now.

[wkwiatek]

@fkrauthan

Did webpack@^2.2 together with webpack-dev-server@^2.2 solve your problems too? If yes, then we can close the issue.

[fkrauthan]

I have to give it a try later next week. Will update this ticket as soon as possible. We could also close it for now and I just comment on here in case it still is an issue?

[wkwiatek]

We'll wait couple more days until you verify it was the case. Thanks!

[fkrauthan]

I just updated my code to use webpack 2.2.1 and webpack-dev-server 2.4.1

And it looks like the step into the right direction. Now I get: react-router] You cannot change <Router routes>; it will be ignored

My current reload code looks like this:

// Render with devtools if enabled
if (__DEVTOOLS__ && !window.devToolsExtension) {
    const DevAppRoot = require("./components/DevAppRoot").default;
    ReactDOM.render(
        <AppContainer errorReporter={errorReporter}>
            <DevAppRoot store={store} history={history} routerRender={applyRouterMiddleware(useScroll())} routes={createRoutes(store, reducerRegistry)} />
        </AppContainer>,
        dest
    );

    // Listen for hot replacement
    if (module.hot) {
        module.hot.accept(['./components/DevAppRoot', '../common/routes/create'], () => {
            const NewDevAppRoot = require("./components/DevAppRoot").default;

            ReactDOM.render(
                <AppContainer errorReporter={errorReporter}>
                    <NewDevAppRoot store={store} history={history} routerRender={applyRouterMiddleware(useScroll())} routes={createRoutes(store, reducerRegistry)} />
                </AppContainer>,
                dest
            );
        });
    }
}

[fkrauthan]

But interesting enough it still seems to hot reload correctly regardless of that warning. So i guess this ticket can be closed. I might gonna switch to the new react router anyways.

[wkwiatek]

Ok, so I'll close this one. Problems and solutions with React Router v3 are being discussed here: #288.

BTW switching to React Router v4 should definitely solve the problems.

[joriskoris]

@ElForastero did you figure it out?

[songtao1]

Try to perform NPM upgrade and reinstall node-modules. npm install -g npm