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

Co-authored-by: Hiroshi Ogawa <[email protected]>

Author: sapphi-red

packages/plugin-react/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+### Fix `RefreshRuntime` being injected twice for class components on rolldown-vite ([#708](https://github.com/vitejs/vite-plugin-react/pull/708))
+
 ## 5.0.0 (2025-08-07)
 
 ## 5.0.0-beta.0 (2025-07-28)

packages/plugin-react/src/index.ts

@@ -255,14 +255,15 @@ export default function viteReact(opts: Options = {}): Plugin[] {
 
         const isJSX = filepath.endsWith('x')
         const useFastRefresh =
+          !isRolldownVite &&
           !skipFastRefresh &&
           !ssr &&
           (isJSX ||
             (opts.jsxRuntime === 'classic'
               ? importReactRE.test(code)
               : code.includes(jsxImportDevRuntime) ||
                 code.includes(jsxImportRuntime)))
-        if (useFastRefresh && !isRolldownVite) {
+        if (useFastRefresh) {
           plugins.push([
             await loadPlugin('react-refresh/babel'),
             { skipEnvCheck: true },

playground/compiler/__tests__/compiler.spec.ts

@@ -5,6 +5,7 @@ test('should render', async () => {
   expect(await page.textContent('button')).toMatch('count is 0')
   expect(await page.click('button'))
   expect(await page.textContent('button')).toMatch('count is 1')
+  expect(await page.textContent('.class-component')).toMatch('ClassComponent')
 })
 
 test.runIf(isServe)('should hmr', async () => {

playground/compiler/src/App.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import './App.css'
+import { ClassComponent } from './ClassComponent'
 
 export function App() {
   const [count, setCount] = useState(0)
@@ -18,6 +19,7 @@ export function App() {
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
+      <ClassComponent />
     </>
   )
 }

playground/compiler/src/ClassComponent.tsx

@@ -0,0 +1,7 @@
+import { Component } from 'react'
+
+export class ClassComponent extends Component {
+  public render() {
+    return <div className="class-component">ClassComponent</div>
+  }
+}