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!

Answered by mischnic

Nov 23, 2023

There was some work for this here: #9227
But I don't know any details on how to use that

View full answer

mischnic · 2023-11-23T09:09:32Z

mischnic
Nov 23, 2023
Collaborator

There was some work for this here: #9227
But I don't know any details on how to use that

1 reply

liamqma Nov 23, 2023
Author

Thanks @mischnic !

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

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

Uh oh!

liamqma Nov 16, 2023

Replies: 1 comment · 1 reply

Uh oh!

mischnic Nov 23, 2023 Collaborator

Uh oh!

liamqma Nov 23, 2023 Author

liamqma
Nov 16, 2023

Replies: 1 comment 1 reply

mischnic
Nov 23, 2023
Collaborator

liamqma Nov 23, 2023
Author