[@vitejs/plugin-react] React 18's bootstrapModules option incompatible with Vite's React plugin

[jplhomer]

Describe the bug

React 18 introduces a new renderToPipeableStream pattern, which includes options for adding client entrypoints via bootstrapScripts and bootstrapModules:

renderToPipeableStream(
  <App />,
  {
    bootstrapModules: ["src/main.jsx"],
  }
).pipe(response);

Script tags generated from these options include the async property. This allows React to progressively hydrate the document as it streams in.

Unfortunately, this is incompatible with the React Refresh header added in @vitejs/plugin-react. I assume this is because the header code throws an Error if it cannot detect the preamble (which is still loaded eventually, just not asynchronously):

Html.jsx:6 Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201
    at Html.jsx:6:11
(anonymous) @ Html.jsx:6
client.ts:52 

It's odd that I cannot reproduce this behavior by simply adding async to the script tag in the React starter template: https://stackblitz.com/edit/vitejs-vite-fpvd7t?file=index.html

But I can when it's included via bootstrapModules: jplhomer/vite-streaming-ssr-demo#3

Perhaps this means that the way React is injecting the script makes it execute earlier than it normally does? I'm kind of stumped.

Not sure what the best approach to solving this is! I think it's important that entrypoint scripts can be async to support streaming SSR in React 18.

Should we to update the injected header to more gracefully wait for the RefreshRuntime to be available?

Reproduction

jplhomer/vite-streaming-ssr-demo#3

System Info

System:
    OS: macOS 12.2
    CPU: (8) arm64 Apple M1 Pro
    Memory: 133.94 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Safari: 15.3
  npmPackages:
    @vitejs/plugin-react: ^1.1.4 => 1.1.4 
    vite: ^2.7.13 => 2.7.13

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[cyco130]

It seems to work when I add the async attribute to the preamble script.

[Trackhe]

Do you know what i missed? Because i cant get SSR working with the Production build: https://github.com/Trackhe/Vite-React-SSR-HMR
vitejs/vite#8449

[b3nten]

It seems to work when I add the async attribute to the preamble script.

Doesn't seem to be working for me unfortunately. The workaround seems to be loading the script as part of the stream.

[letientai299]

I hit this same problem and managed to find a work around. I put together a demo below. Perhaps someone with more knowledge on Vite could derives a proper solution to make React SSR more straight forward with Vite.

https://github.com/letientai299/vite-react-ssr-typescript

[ArnaudBarre]

Hi everyone!

I currently investigate open issues to work on a new API for the next major. I understand that there is an issue with renderToPipeableStream and script loading order, but I don't see any quick reproduction to look at it (only a closed PR on repo)

Can someone provide a small reproduction of the issue? Thanks

[github-actions]

Hello @jplhomer. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.