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

mqklin commented 7 years ago

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

ctrlplusb commented 7 years ago

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 7 years ago

Thank you very much.

codeBelt commented 6 years ago

@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 6 years ago

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

ctrlplusb / react-async-component

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