Separating Webpack 2 code with server-side rendering and React-Router-v4

Question

Using webpack2.2.0-rc1 and edit routeerv4 and using this gist to compile code for work that says the following:

function asyncComponent(getComponent) { return class AsyncComponent extends React.Component { static Component = null; state = { Component: AsyncComponent.Component }; componentWillMount() { if (!this.state.Component) { getComponent().then(Component => { AsyncComponent.Component = Component this.setState({ Component }) }) } } render() { const { Component } = this.state if (Component) { return <Component {...this.props} /> } return null } } } const Foo = asyncComponent(() => System.import('./Foo').then(module => module.default) ) 

It really works, but I use server-side rendering. Therefore, on the server, I need component A, and then on the client component A. System.import A. FInally, when I access the lazy loaded route, I get this reuse markup warning, since the client rendered the initially downloaded zero from https: / /gist.github.com/acdlite/a68433004f9d6b4cbc83b5cc3990c194#file-app-js-L21 when loading component A. Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) CO 0.0.0 </h1></div><!-- react-empty: 6 - (server) CO 0.0.0 </h1> </div><div data-radium="tru Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) CO 0.0.0 </h1></div><!-- react-empty: 6 - (server) CO 0.0.0 </h1> </div><div data-radium="tru

How can I make this work error free?

Answer 1

I just changed this line to AsyncComponent to return the brake tag
, while the component, broken into code, is not loaded yet. Then, instead of requiring the actual component to display the server side, I just throw in another brake tag, so the markup actually matches.

This is far from perfect

 export function Shell(Component) { return React.createClass({ render: function () { return ( <div> <Bar/> <Component {...this.props}/> </div> ); } }); }; export const Waiting = React.createClass({ render: function () { return ( <div> <Bar/> <br/> </div> ); } }); // Client routes const AsyncDash = Utils.asyncRoute(() => System.import("../components/dashboard/dashboard.tsx")); const AsyncLogin = Utils.asyncRoute(() => System.import("../components/login/login")); const routes = () => { return (<div> <Match exactly pattern="/" component={Shell(AsyncLogin)}/> <Match exactly pattern="/dashboard" component={Shell(AsyncDash)}/> </div> ); }; // Server routes const routes = () => { return (<div> <Match exactly pattern="/" component={Waiting}/> <Match exactly pattern="/dashboard" component={Waiting}/> </div> ); };