ctrlplusb/react-async-component

different markup on the client and server (with code splitting)

mqklin opened this issue · 4 comments

mqklin commented

I tried to reimplement your guide: https://github.com/mqklin/react-async-component-bug
And I got this error:
1
What's wrong?

ctrlplusb commented

The way your state gets interpreted by the client script seems to be happening synchronously for some reason. Switch the statements around so that the state is bound before your client script gets loaded.

The following works:

         <body>
           <div id="app">${appString}</div>
           <script>
             window.ASYNC_COMPONENTS_STATE = ${serialize(asyncState)};
           </script>
           <script src="/client.js"></script>
         </body>
mqklin commented

Thank you very much.

codeBelt commented

@ctrlplusb, you are awesome! I love this library.

I almost have it all working but when I load my AboutAsync page I get "checksum was invalid". From what you mentioned above. The HtmlWebpackPlugin output looks correct.

Here is my PR to see what I've changed.

<body>
    <div id="root">...</div>
    <script>window.__STATE__ = {...}</script>
    <script>window.__ASYNC_COMPONENTS_STATE__ = {"resolved": {"1": true}}</script>
    <script type="text/javascript" src="assets/scripts/manifest.eda98538b94fe5229f59.js"></script>
    <script type="text/javascript" src="assets/scripts/vendor.5cc12dcea7bbe37afddd.js"></script>
    <script type="text/javascript" src="assets/scripts/main.c5c713e9327d0acb3f5a.js"></script>
</body>
codeBelt commented

I figured it out. I forgot to add asyncBootstrapper to the client-side code.

https://github.com/codeBelt/hapi-react-hot-loader-example/blob/master/src/client.jsx#L42