webpack-hot-server-middleware and react-loadable

[amangeot]

Hello, I can't get react-loadable to work with this really cool package for code splitting.

Has anyone managed to do it and could suggest how to do it? Or share an example?

Thank you!

[richardscarrott]

I'm using react-loadable in the 60fram.es boilerplate, e.g. https://github.com/60frames/react-boilerplate/blob/master/src/components/index/IndexLoadable.js

NOTE: It uses an older version of react-loadable, a more recent version I used on another project required the use of their babel plugin or you need to manually faff around with import-inspector

The key is to disable code splitting when SSRing with:

new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 1
})

[amangeot]

I eventually have the time to look at the boilerplate, it sounds very promising, thank you @richardscarrott

Have you considered webpack v3, react-router v4 and react-loadable v5?

I'd like to use the last versions, did you encounter any issue with those for SSR with data fetching and code splitting?

[richardscarrott]

I've got code splitting working on a private project using Webpack v3 and react-loadable v5, no real problems with those.

I've avoided upgrading to React Router v4 on any projects because the departure from a centralised config means it's no longer possible to match components before rendering to determine data dependencies.

I've heard https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config is a potential solution but tbh it doesn't seem like it has first class support from the react-router team.

[hedgepigdaniel]

Check out react-universal-component, redux-first-router, and redux-first-router-demo