fix(plugin-vue): disable oxc jsx.refresh for Vue SFCs to prevent React Fast Refresh injection (fix #798)

packages/plugin-vue/src/main.ts

@@ -292,6 +292,10 @@ export async function transformMain(
           // target can be overridden by oxc config target
           // @ts-ignore Rolldown-specific
           ...options.devServer?.config.oxc,
+          jsx: {
+            ...options.devServer?.config.oxc?.jsx,
+            refresh: false,
+          },
           lang: 'ts',
           sourcemap: options.sourceMap,
         },

playground/vue-refresh-bug/RefreshBug.vue

@@ -0,0 +1,11 @@
+<template>
+  <p class="refresh-bug">This should render without $RefreshSig$ errors</p>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from 'vue'
+
+// useSlots() triggers Oxc's React refresh pass because oxc keys off
+// the "use" prefix, treating it like a React hook.
+const slots = useSlots()
+</script>

playground/vue-refresh-bug/__tests__/vue-refresh-bug.spec.ts

@@ -0,0 +1,23 @@
+import { expect, test } from 'vitest'
+import { browserErrors, browserLogs, isBuild, page } from '~utils'
+
+test('should render without React refresh injection', async () => {
+  expect(await page.textContent('.refresh-bug')).toMatch(
+    'This should render without $RefreshSig$ errors',
+  )
+})
+
+test.runIf(!isBuild)(
+  'should not inject $RefreshSig$ or $RefreshReg$ into Vue SFCs',
+  async () => {
+    for (const log of browserLogs) {
+      expect(log).not.toMatch(/\$RefreshSig\$/)
+      expect(log).not.toMatch(/\$RefreshReg\$/)
+    }
+
+    for (const error of browserErrors) {
+      expect(error.message).not.toMatch(/\$RefreshSig\$/)
+      expect(error.message).not.toMatch(/\$RefreshReg\$/)
+    }
+  },
+)

playground/vue-refresh-bug/index.html

@@ -0,0 +1,7 @@
+<div id="app"></div>
+<script type="module">
+  import { createApp } from 'vue'
+  import RefreshBug from './RefreshBug.vue'
+
+  createApp(RefreshBug).mount('#app')
+</script>

playground/vue-refresh-bug/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vitejs/test-vue-refresh-bug",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "catalog:"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "workspace:*"
+  }
+}

playground/vue-refresh-bug/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import vuePlugin from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vuePlugin()],
+  // simulate what @vitejs/plugin-react does:
+  // it sets config.oxc.jsx.refresh = true globally
+  oxc: {
+    jsx: {
+      refresh: true,
+    },
+  },
+  build: {
+    minify: false,
+  },
+})