React-hot-loader: React hot loader doesn't work on code split components

[sammkj]

I'm trying to achieve code splitting by routes with hot reload. Hot reload only works for components that are not in the code split routes.

For example, I have routes declared like below:

    <Router history={history}>
        <Route
          path="/"
          component={Structure}
        >
          <Route
            path="/launch"
            getComponents={(location, cb) => {
              require.ensure([], () => {
                cb(null, require('./components/LaunchPage').default);
              }, 'LaunchPage');
            }}
          />
          <Route
            path="/app"
            getComponents={(location, cb) => {
              require.ensure([], () => {
                cb(null, require('./components/AppPage').default);
              }, 'AppPage');
            }}
          />
        </Route>
      </Router>

Hot reload only works for Structure component but not LaunchPage and AppPage. Also I keep getting error below whenever I update LaunchPage or AppPage.

[HMR] unexpected require(318) from disposed module 135

Here's the sample repo. Any guidance or pointers on how to solve this would be much appreciated!

[ctrlplusb]

Might be a helpful reference, I have RHL working with code split routes:
https://github.com/ctrlplusb/react-universally

[sammkj]

@ctrlplusb thank you for your reference! I have a dumb question here. It seems like your app and every other apps that have code splitting and rhl use express to render their app. Would that make a difference if I use webpack-dev-server instead? My current requirement is I don't need express.

[ctrlplusb]

No problem. What are you using to serve your production code?

[sammkj]

I will be using CDN like S3. For this app, I don't need SSR so express is not needed here. So during development, I use webpack-dev-server to develop the front end. I just couldn't get rhl to work with code splitting. Btw, I'm still very new to webpack. If you know of a better way to do things, it would be greatly appreciated if you can give some hints.

[prewk]

I'm having the same issue with System.import code splitting. It's immediately solved if I statically import the components instead (that is, removing the splitting)

[ctrlplusb]

@prewk this is okay, keep your System.import statements, but then have a wrapping code block that imports the routes statically for dev environment only.

i.e.

if (process.env.NODE_ENV === 'development') {
  require('./routes/Foo');
}

I have this set up in my start kit, so you could reference there if you like. https://github.com/ctrlplusb/react-universally

[prewk]

@ctrlplusb Wow, I wrote that on a tram and then went in searching inside your start kit for a solution and found that exact one. Tried it just now and saw your comment afterwards. You're fast :)

Great start-kit btw, I've borrowed a lot! Thanks!

[calesce]

Thanks for the report, @sammkj. This looks like the same issue as #288, so gonna close this as duplicate since there's more discussion there.

Also, it looks like @ctrlplusb has a solution w/ Webpack 2 and System.import, which may be of interest.