feat(react): expose virtual module to simplify hmr preamble setup on ssr by hi-ogawa · Pull Request #890 · vitejs/vite-plugin-react

hi-ogawa · 2025-10-01T10:34:27Z

Description

This PR adds virtual module @vitejs/plugin-react/preamble, which allows SSR app to easily enable HMR by adding import side effect at the top of client entry without handling transformIndexHtml. See playground/ssr-react/src/entry-client.jsx for example.

hi-ogawa · 2025-10-01T14:38:17Z

superseded by #891

hi-ogawa · 2025-10-04T10:31:49Z

Okay, I think I want this one instead of #891 as patching react isn't great.

Let's push this to upstream vitejs/vite-plugin-react#890

- Fix typos: "intiialize" → "initialize", "intiialization" → "initialization" - Fix grammar: "a following" → "the following" - Improve wording for clarity and conciseness 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

- Add preamble section to plugin-react-swc README - Update CHANGELOG entries for both plugin-react and plugin-react-swc - Document the new virtual module feature for SSR HMR setup 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

sapphi-red · 2025-10-06T03:46:52Z

If we add support for options.isEntry in dev, I guess we can inject import '@vitejs/plugin-react-swc/preamble' automatically. I think we can have this utility until we have that feature in Vite.

ArnaudBarre · 2025-10-06T06:56:00Z

packages/common/package.json

    "./refresh-runtime": "./refresh-runtime.js"
  },
+  "dependencies": {
+    "@rolldown/pluginutils": "1.0.0-beta.41"


This should be added to SWC deps too (and maybe rsc) because the common package in bundled into react plugins. I'm not a power user of pnpm, but is catalog the best way to unsure it's the same version everywhere?

Also should we use a strict version?

Ah, this might look weird but I just noticed @rolldown/pluginutils is already in dependencies of all three react packages (and rsc doesn't use it) and they are all pinned with same version. So this should be fine.

Yes ok with dependabot this should be done in sync 👍

…le_setup_on_ssr

hi-ogawa · 2025-10-06T08:34:38Z

If we add support for options.isEntry in dev, I guess we can inject import '@vitejs/plugin-react-swc/preamble' automatically. I think we can have this utility until we have that feature in Vite.

That sounds better, but I'm actually not sure how that works. Would that be something like this?

{
  transform: {
    order: 'post',
    handler(code, id) {
      const info = this.getModuleInfo(id);
      if (info?.isEntry) {
         return `import "..";` + code;
      }
    }
  }
}

sapphi-red · 2025-10-07T05:50:23Z

If we add support for options.isEntry in dev, I guess we can inject import '@vitejs/plugin-react-swc/preamble' automatically. I think we can have this utility until we have that feature in Vite.

That sounds better, but I'm actually not sure how that works. Would that be something like this?
[omit code]

I was thinking about a code like below as opts.isEntry is available for resolveId.

{
  transform: {
    order: 'post',
    handler(code, id, { isEntry }) {
      if (isEntry) {
         return `import "..";` + code;
      }
    }
  }
}

But turns out opts is not available for transform, so I think it'll be like your code.

…le_setup_on_ssr

| datasource | package | from | to | | ---------- | -------------------- | ----- | ----- | | npm | @vitejs/plugin-react | 5.0.4 | 5.1.0 | ## [v5.1.0](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#510-2025-10-24) ##### Add `@vitejs/plugin-react/preamble` virtual module for SSR HMR ([#890](vitejs/vite-plugin-react#890)) SSR applications can now initialize HMR runtime by importing `@vitejs/plugin-react/preamble` at the top of their client entry instead of manually calling `transformIndexHtml`. This simplifies SSR setup for applications that don't use the `transformIndexHtml` API. ##### Fix raw Rolldown support for Rolldown 1.0.0-beta.44+ ([#930](vitejs/vite-plugin-react#930)) Rolldown 1.0.0-beta.44+ removed the top-level `jsx` option in favor of `transform.jsx`. This plugin now uses the `transform.jsx` option to support Rolldown 1.0.0-beta.44+.

Let's push this to upstream vitejs/vite-plugin-react#890

This MR contains the following updates: | Package | Type | Update | Change | OpenSSF | |---|---|---|---|---| | [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme) ([source](https://github.com/vitejs/vite-plugin-react/tree/HEAD/packages/plugin-react)) | devDependencies | major | [`^4.5.2` → `^5.0.0`](https://renovatebot.com/diffs/npm/@vitejs%2fplugin-react/4.7.0/5.1.2) | [![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/vitejs/vite-plugin-react/badge)](https://securityscorecards.dev/viewer/?uri=github.com/vitejs/vite-plugin-react) | --- ### Release Notes <details> <summary>vitejs/vite-plugin-react (@vitejs/plugin-react)</summary> ### [`v5.1.2`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#512-2025-12-08) [Compare Source](vitejs/vite-plugin-react@23db727...f127a24) ### [`v5.1.1`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#511-2025-11-12) [Compare Source](vitejs/vite-plugin-react@3e5a374...23db727) ##### Update code to support newer `rolldown-vite` ([#976](vitejs/vite-plugin-react#976)) `rolldown-vite` will remove `optimizeDeps.rollupOptions` in favor of `optimizeDeps.rolldownOptions` soon. This plugin now uses `optimizeDeps.rolldownOptions` to support newer `rolldown-vite`. Please update `rolldown-vite` to the latest version if you are using an older version. ### [`v5.1.0`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#510-2025-10-24) [Compare Source](vitejs/vite-plugin-react@450d7df...3e5a374) ##### Add `@vitejs/plugin-react/preamble` virtual module for SSR HMR ([#890](vitejs/vite-plugin-react#890)) SSR applications can now initialize HMR runtime by importing `@vitejs/plugin-react/preamble` at the top of their client entry instead of manually calling `transformIndexHtml`. This simplifies SSR setup for applications that don't use the `transformIndexHtml` API. ##### Fix raw Rolldown support for Rolldown 1.0.0-beta.44+ ([#930](vitejs/vite-plugin-react#930)) Rolldown 1.0.0-beta.44+ removed the top-level `jsx` option in favor of `transform.jsx`. This plugin now uses the `transform.jsx` option to support Rolldown 1.0.0-beta.44+. ### [`v5.0.4`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#504-2025-09-27) [Compare Source](vitejs/vite-plugin-react@8293cb3...450d7df) ##### Perf: use native refresh wrapper plugin in rolldown-vite ([#881](vitejs/vite-plugin-react#881)) ### [`v5.0.3`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#503-2025-09-17) [Compare Source](vitejs/vite-plugin-react@1f4b4d9...8293cb3) ##### HMR did not work for components imported with queries with rolldown-vite ([#872](vitejs/vite-plugin-react#872)) ##### Perf: simplify refresh wrapper generation ([#835](vitejs/vite-plugin-react#835)) ### [`v5.0.2`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#502-2025-08-28) [Compare Source](vitejs/vite-plugin-react@efe4344...1f4b4d9) ##### Skip transform hook completely in rolldown-vite in dev if possible ([#783](vitejs/vite-plugin-react#783)) ### [`v5.0.1`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#501-2025-08-19) [Compare Source](vitejs/vite-plugin-react@9e4a944...efe4344) ##### Set `optimizeDeps.rollupOptions.transform.jsx` instead of `optimizeDeps.rollupOptions.jsx` for rolldown-vite ([#735](vitejs/vite-plugin-react#735)) `optimizeDeps.rollupOptions.jsx` is going to be deprecated in favor of `optimizeDeps.rollupOptions.transform.jsx`. ##### Perf: skip `babel-plugin-react-compiler` if code has no `"use memo"` when `{ compilationMode: "annotation" }` ([#734](vitejs/vite-plugin-react#734)) ##### Respect tsconfig `jsxImportSource` ([#726](vitejs/vite-plugin-react#726)) ##### Fix `reactRefreshHost` option on rolldown-vite ([#716](vitejs/vite-plugin-react#716)) ##### Fix `RefreshRuntime` being injected twice for class components on rolldown-vite ([#708](vitejs/vite-plugin-react#708)) ##### Skip `babel-plugin-react-compiler` on non client environment ([689](vitejs/vite-plugin-react#689)) ### [`v5.0.0`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#500-2025-08-07) [Compare Source](vitejs/vite-plugin-react@8041706...9e4a944) </details> --- - [ ] If you want to rebase/retry this MR, check this box --- This MR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  See merge request swiss-armed-forces/cyber-command/cea/loom!212 Co-authored-by: Loom MR Pipeline Trigger <group_103951964_bot_9504bb8dead6d4e406ad817a607f24be@noreply.gitlab.com>

chore(deps): update @vitejs/plugin-react (major) This MR contains the following updates: | Package | Type | Update | Change | OpenSSF | |---|---|---|---|---| | [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme) ([source](https://github.com/vitejs/vite-plugin-react/tree/HEAD/packages/plugin-react)) | devDependencies | major | [`^4.5.2` → `^5.0.0`](https://renovatebot.com/diffs/npm/@vitejs%2fplugin-react/4.7.0/5.1.2) | [![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/vitejs/vite-plugin-react/badge)](https://securityscorecards.dev/viewer/?uri=github.com/vitejs/vite-plugin-react) | --- ### Release Notes <details> <summary>vitejs/vite-plugin-react (@vitejs/plugin-react)</summary> ### [`v5.1.2`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#512-2025-12-08) [Compare Source](vitejs/vite-plugin-react@23db727...f127a24) ### [`v5.1.1`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#511-2025-11-12) [Compare Source](vitejs/vite-plugin-react@3e5a374...23db727) ##### Update code to support newer `rolldown-vite` ([#976](vitejs/vite-plugin-react#976)) `rolldown-vite` will remove `optimizeDeps.rollupOptions` in favor of `optimizeDeps.rolldownOptions` soon. This plugin now uses `optimizeDeps.rolldownOptions` to support newer `rolldown-vite`. Please update `rolldown-vite` to the latest version if you are using an older version. ### [`v5.1.0`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#510-2025-10-24) [Compare Source](vitejs/vite-plugin-react@450d7df...3e5a374) ##### Add `@vitejs/plugin-react/preamble` virtual module for SSR HMR ([#890](vitejs/vite-plugin-react#890)) SSR applications can now initialize HMR runtime by importing `@vitejs/plugin-react/preamble` at the top of their client entry instead of manually calling `transformIndexHtml`. This simplifies SSR setup for applications that don't use the `transformIndexHtml` API. ##### Fix raw Rolldown support for Rolldown 1.0.0-beta.44+ ([#930](vitejs/vite-plugin-react#930)) Rolldown 1.0.0-beta.44+ removed the top-level `jsx` option in favor of `transform.jsx`. This plugin now uses the `transform.jsx` option to support Rolldown 1.0.0-beta.44+. ### [`v5.0.4`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#504-2025-09-27) [Compare Source](vitejs/vite-plugin-react@8293cb3...450d7df) ##### Perf: use native refresh wrapper plugin in rolldown-vite ([#881](vitejs/vite-plugin-react#881)) ### [`v5.0.3`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#503-2025-09-17) [Compare Source](vitejs/vite-plugin-react@1f4b4d9...8293cb3) ##### HMR did not work for components imported with queries with rolldown-vite ([#872](vitejs/vite-plugin-react#872)) ##### Perf: simplify refresh wrapper generation ([#835](vitejs/vite-plugin-react#835)) ### [`v5.0.2`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#502-2025-08-28) [Compare Source](vitejs/vite-plugin-react@efe4344...1f4b4d9) ##### Skip transform hook completely in rolldown-vite in dev if possible ([#783](vitejs/vite-plugin-react#783)) ### [`v5.0.1`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#501-2025-08-19) [Compare Source](vitejs/vite-plugin-react@9e4a944...efe4344) ##### Set `optimizeDeps.rollupOptions.transform.jsx` instead of `optimizeDeps.rollupOptions.jsx` for rolldown-vite ([#735](vitejs/vite-plugin-react#735)) `optimizeDeps.rollupOptions.jsx` is going to be deprecated in favor of `optimizeDeps.rollupOptions.transform.jsx`. ##### Perf: skip `babel-plugin-react-compiler` if code has no `"use memo"` when `{ compilationMode: "annotation" }` ([#734](vitejs/vite-plugin-react#734)) ##### Respect tsconfig `jsxImportSource` ([#726](vitejs/vite-plugin-react#726)) ##### Fix `reactRefreshHost` option on rolldown-vite ([#716](vitejs/vite-plugin-react#716)) ##### Fix `RefreshRuntime` being injected twice for class components on rolldown-vite ([#708](vitejs/vite-plugin-react#708)) ##### Skip `babel-plugin-react-compiler` on non client environment ([689](vitejs/vite-plugin-react#689)) ### [`v5.0.0`](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#500-2025-08-07) [Compare Source](vitejs/vite-plugin-react@8041706...9e4a944) </details> --- - [ ] If you want to rebase/retry this MR, check this box --- This MR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  See merge request swiss-armed-forces/cyber-command/cea/loom!212 Co-authored-by: Loom MR Pipeline Trigger <group_103951964_bot_9504bb8dead6d4e406ad817a607f24be@noreply.gitlab.com> Co-authored-by: open-source Pipeline <group_90701827_bot_ed04ae348bc5f40af9966fb8b6867e99@noreply.gitlab.com>

feat: expose virtual for simpler preamble setup on ssr

5568bd5

hi-ogawa mentioned this pull request Oct 1, 2025

refactor: auto inject hmr preamble without transformIndexHtml #891

Closed

4 tasks

hi-ogawa closed this Oct 1, 2025

hi-ogawa deleted the 10-01-feat_expose_virtual_for_simpler_preamble_setup_on_ssr branch October 1, 2025 14:38

hi-ogawa restored the 10-01-feat_expose_virtual_for_simpler_preamble_setup_on_ssr branch October 4, 2025 10:31

hi-ogawa reopened this Oct 4, 2025

hi-ogawa mentioned this pull request Oct 4, 2025

chore(fullstack): move reactHmrPreamblePlugin to each example hi-ogawa/vite-plugins#1201

Merged

hi-ogawa added a commit to hi-ogawa/vite-plugins that referenced this pull request Oct 4, 2025

chore(fullstack): move reactHmrPreamblePlugin to each example (#1201)

1278edd

Let's push this to upstream vitejs/vite-plugin-react#890

hi-ogawa mentioned this pull request Dec 22, 2025

[fullstack] upstream fixes hi-ogawa/vite-plugin-fullstack#45

Open

5 tasks

hi-ogawa changed the title ~~feat: expose virtual for simpler preamble setup on ssr~~ feat(react): expose virtual for simpler preamble setup on ssr Oct 6, 2025

hi-ogawa and others added 6 commits October 6, 2025 10:56

chore: cleanup

5667d01

fix: fix preamble types

c79a8cd

docs

0e7eb5f

feat: add @vitejs/plugin-react-swc/preamble

3473bbb

hi-ogawa marked this pull request as ready for review October 6, 2025 02:39

hi-ogawa requested review from ArnaudBarre and sapphi-red and removed request for sapphi-red October 6, 2025 02:45

ArnaudBarre reviewed Oct 6, 2025

View reviewed changes

Merge branch 'main' into 10-01-feat_expose_virtual_for_simpler_preamb…

21d2a57

…le_setup_on_ssr

ArnaudBarre mentioned this pull request Oct 6, 2025

Not working with React Router 7 ArnaudBarre/vite-plugin-react-click-to-component#13

Closed

Merge branch 'main' into 10-01-feat_expose_virtual_for_simpler_preamb…

6607331

…le_setup_on_ssr

ArnaudBarre approved these changes Oct 8, 2025

View reviewed changes

Merge branch 'main' into 10-01-feat_expose_virtual_for_simpler_preamb…

5e8874e

…le_setup_on_ssr

hi-ogawa changed the title ~~feat(react): expose virtual for simpler preamble setup on ssr~~ feat(react): expose virtual to simplify hmr preamble setup on ssr Oct 9, 2025

hi-ogawa changed the title ~~feat(react): expose virtual to simplify hmr preamble setup on ssr~~ feat(react): expose virtual module to simplify hmr preamble setup on ssr Oct 9, 2025

hi-ogawa merged commit fffb7eb into main Oct 9, 2025
22 checks passed

hi-ogawa deleted the 10-01-feat_expose_virtual_for_simpler_preamble_setup_on_ssr branch October 9, 2025 06:50

chrisbbreuer mentioned this pull request Oct 24, 2025

chore(deps): update all non-major dependencies stacksjs/ts-maps#413

Closed

hi-ogawa added a commit to hi-ogawa/vite-plugin-fullstack that referenced this pull request Dec 18, 2025

chore(fullstack): move reactHmrPreamblePlugin to each example (#1201)

579dea6

Let's push this to upstream vitejs/vite-plugin-react#890

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

feat(react): expose virtual module to simplify hmr preamble setup on ssr#890

feat(react): expose virtual module to simplify hmr preamble setup on ssr#890
hi-ogawa merged 10 commits intomainfrom
10-01-feat_expose_virtual_for_simpler_preamble_setup_on_ssr

hi-ogawa commented Oct 1, 2025 •

edited

Loading

Uh oh!

hi-ogawa commented Oct 1, 2025

Uh oh!

hi-ogawa commented Oct 4, 2025

Uh oh!

sapphi-red commented Oct 6, 2025

Uh oh!

ArnaudBarre Oct 6, 2025

Uh oh!

hi-ogawa Oct 6, 2025

Uh oh!

ArnaudBarre Oct 7, 2025

Uh oh!

hi-ogawa commented Oct 6, 2025 •

edited

Loading

Uh oh!

sapphi-red commented Oct 7, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Comments

Conversation

hi-ogawa commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

hi-ogawa commented Oct 1, 2025

Uh oh!

hi-ogawa commented Oct 4, 2025

Uh oh!

sapphi-red commented Oct 6, 2025

Uh oh!

ArnaudBarre Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

hi-ogawa Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

ArnaudBarre Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

hi-ogawa commented Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sapphi-red commented Oct 7, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hi-ogawa commented Oct 1, 2025 •

edited

Loading

hi-ogawa commented Oct 6, 2025 •

edited

Loading