fix(react): refreshWrapper was injected twice for class components when using babel plugins and rolldown-vite by sapphi-red · Pull Request #708 · vitejs/vite-plugin-react

sapphi-red · 2025-08-12T12:02:39Z

Description

…en using babel plugins and rolldown-vite

hi-ogawa

Why did this happen only on class component?

packages/plugin-react/src/index.ts

ArnaudBarre · 2025-08-13T05:29:50Z

I need to look at it in details, because it means the host option is not respected then.
What was the initial reason for rolldown-vite to include framework specific hmr?

…-for-class-components-when-using-babel-plugins-and-rolldown-vite

hi-ogawa

Why did this happen only on class component?

This condition reactCompRE was causing the first addRefreshWrapper during vite:react-babel to inject wrapper.

vite-plugin-react/packages/common/refresh-utils.ts

Line 30 in 275d2ee

if (!hasRefresh && !onlyReactComp) return { code, map: normalizedMap }

hi-ogawa · 2025-08-14T00:56:25Z

I need to look at it in details, because it means the host option is not respected then. What was the initial reason for rolldown-vite to include framework specific hmr?

Rolldown-vite doesn't inject refresh "wrapper", but it only takes care of refresh "transform". Rolldown-vite still uses vite:react:refresh-wrapper plugin below and addRefreshWrapper during vite:react-babel was meant to be skipped (but it wasn't, thus bug).

Indeed, reactRefreshHost isn't passed to vite:react:refresh-wrapper, so that's also a separate bug.

ArnaudBarre · 2025-08-14T14:20:59Z

Thanks the condition after the update seems better for me!

| datasource | package | from | to | | ---------- | -------------------- | ----- | ----- | | npm | @vitejs/plugin-react | 4.7.0 | 5.0.1 | ## [v5.0.1](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#501-2025-08-19) ##### 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)

| datasource | package | from | to | | ---------- | -------------------- | ----- | ----- | | npm | @vitejs/plugin-react | 4.7.0 | 5.0.2 | ## [v5.0.2](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#502-2025-08-28) ##### 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) ##### 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)

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>

fix(react): refreshWrapper was injected twice for class components wh…

0996437

…en using babel plugins and rolldown-vite

sapphi-red added p3-minor-bug 🔨 An edge case that only affects very specific usage (priority) plugin: react labels Aug 12, 2025

hi-ogawa reviewed Aug 13, 2025

View reviewed changes

packages/plugin-react/src/index.ts Outdated Show resolved Hide resolved

hi-ogawa added 2 commits August 14, 2025 09:01

Merge branch 'main' into fix/react-refresh-wrapper-was-injected-twice…

c78e981

…-for-class-components-when-using-babel-plugins-and-rolldown-vite

refactor: move condition

275d2ee

hi-ogawa reviewed Aug 14, 2025

View reviewed changes

hi-ogawa approved these changes Aug 14, 2025

View reviewed changes

chore: changelog

aa1f1cc

hi-ogawa merged commit a22f29b into main Aug 14, 2025
11 checks passed

hi-ogawa deleted the fix/react-refresh-wrapper-was-injected-twice-for-class-components-when-using-babel-plugins-and-rolldown-vite branch August 14, 2025 01:07

hi-ogawa mentioned this pull request Aug 14, 2025

fix(react): respect reactRefreshHost option on rolldown-vite #716

Merged

chrisbbreuer mentioned this pull request Aug 19, 2025

chore(deps): update dependency @vitejs/plugin-react to 5.0.1 stacksjs/ts-maps#51

Merged

1 task

Lokoak47 approved these changes Oct 6, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

fix(react): refreshWrapper was injected twice for class components when using babel plugins and rolldown-vite#708

fix(react): refreshWrapper was injected twice for class components when using babel plugins and rolldown-vite#708
hi-ogawa merged 4 commits intomainfrom
fix/react-refresh-wrapper-was-injected-twice-for-class-components-when-using-babel-plugins-and-rolldown-vite

sapphi-red commented Aug 12, 2025

Uh oh!

hi-ogawa left a comment •

edited

Loading

Uh oh!

Uh oh!

ArnaudBarre commented Aug 13, 2025

Uh oh!

hi-ogawa left a comment

Uh oh!

hi-ogawa commented Aug 14, 2025

Uh oh!

Uh oh!

ArnaudBarre commented Aug 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Comments

Conversation

sapphi-red commented Aug 12, 2025

Description

Uh oh!

hi-ogawa left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ArnaudBarre commented Aug 13, 2025

Uh oh!

hi-ogawa left a comment

Choose a reason for hiding this comment

Uh oh!

hi-ogawa commented Aug 14, 2025

Uh oh!

Uh oh!

ArnaudBarre commented Aug 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

hi-ogawa left a comment •

edited

Loading