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

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>
+  }
+}