Shared Bundles is not compatible with React 18's renderToPipeableStream #9387

liamqma · 2023-11-16T05:03:40Z

liamqma
Nov 16, 2023

I've setup a minimal example to demonstrate the problem I face:
https://github.com/liamqma/reproduce-bug-parcel-react-18

Let's say that I have two entries:

foo.html
bar.html

They share some common modules (e.g. React), so the generated files are

foo.84654a46.js (shared-bundle)
bar.67b35129.js
bar.html
foo.72b22426.js
foo.html

foo.html looks like

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="/foo.84654a46.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/foo.72b22426.js"></script>
  </body>
</html>

foo.72b22426.js relies on foo.84654a46.js. We are all good as long as the loading order is correct and deterministic.

However, with React 18's renderToPipeableStream, <script async> is recommended to use. Please see this post for more details.

So the SSR'ed HTML becomes

<!DOCTYPE html>
<html>
  <body>
    ...
    <script type="module" src="/foo.84654a46.js" async></script>
    <script type="module" src="/foo.72b22426.js" async></script>
  </body>
</html>

Because of the nature of async, we cannot guarantee the shared-bundle is loaded/executed before. You can checkout the repo, where I intentionally make shared-bundle 2 seconds slower to download.

I wonder how to make shared bundle play nicely with renderToPipeableStream?

One way I can think of is that shared bundle is loaded by JS instead of being placed on generated HTML.

Thank you for help!