Skip to content

(not merge) chore: test react preamble script async #792

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
hi-ogawa wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

(not merge) chore: test react preamble script async #792

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/react-server/src/features/assets/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ export function vitePluginServerAssets({
if (!manager.buildType) {
// extract <head> injected by plugins
let { head } = await getIndexHtmlTransform($__global.dev.server);
head = head.replace(
'<script type="module">',
'<script type="module" async>',
);
Comment on lines +31 to +34
Copy link
Owner Author

@hi-ogawa hi-ogawa Apr 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without async attribute, http://localhost:5173/test/loading/1 ("hydrate while streaming" example) fails by

chunk-3WLTBFGF.js:9 Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.
    at chunk-3WLTBFGF.js:9:11


// serve dev css as ?direct so that ssr html won't get too huge.
// then remove this injected style on first hot update.
Expand Down
10 changes: 5 additions & 5 deletions packages/react-server/src/plugin/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -453,11 +453,11 @@ export function vitePluginReactServer(
// wrapper entry to ensure client entry runs after vite/react inititialization
return /* js */ `
import "${SERVER_CSS_PROXY}";
import RefreshRuntime from "/@react-refresh";
RefreshRuntime.injectIntoGlobalHook(window);
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;
window.__vite_plugin_react_preamble_installed__ = true;
// import RefreshRuntime from "/@react-refresh";
// RefreshRuntime.injectIntoGlobalHook(window);
// window.$RefreshReg$ = () => {};
// window.$RefreshSig$ = () => (type) => type;
// window.__vite_plugin_react_preamble_installed__ = true;
Comment on lines +456 to +460
Copy link
Owner Author

@hi-ogawa hi-ogawa Apr 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Practically speaking, we shouldn't have to worry about race condition since head script should finish first, so we don't need manual preamble injection.

await import("${entryBrowser}");
`;
}
Expand Down