fix(plugin-vue): disable oxc jsx.refresh for Vue SFCs to prevent React Fast Refresh injection (fix #798) - #814
Open
AmariahAK wants to merge 1 commit into
Open
fix(plugin-vue): disable oxc jsx.refresh for Vue SFCs to prevent React Fast Refresh injection (fix #798)#814AmariahAK wants to merge 1 commit into
AmariahAK wants to merge 1 commit into
Conversation
…t Fast Refresh injection (fix vitejs#798) When @vitejs/plugin-react is present in the same Vite config, it sets config.oxc.jsx.refresh = true globally. The Vue plugin's TS transpilation step in transformMain blindly spreads the full config.oxc into transformWithOxc, causing Oxc to inject $RefreshSig$ / $RefreshReg$ into Vue SFCs with <script setup lang="ts"> that use use* composables. On Vue-only pages this causes ReferenceError at runtime. The fix explicitly overrides jsx.refresh to false in the Oxc transform options for Vue SFCs, preserving all other oxc config inheritance. Co-authored-by: atlarix-agent <agent@atlarix.dev>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What is this PR solving?
When
@vitejs/plugin-reactis present in the same Vite config, it setsconfig.oxc.jsx.refresh = trueglobally. The Vue plugin's TS transpilationstep in
transformMainblindly spreads the fullconfig.oxcintotransformWithOxc, causing Oxc to inject$RefreshSig$/$RefreshReg$into Vue SFCs with
<script setup lang="ts">that useuse*composables(e.g.
useSlots(),useRoute(),useStore()). On Vue-only pages theseglobals don't exist, causing
ReferenceError: $RefreshSig$ is not defined.The fix explicitly overrides
jsx.refreshtofalsein the Oxc transformoptions for Vue SFCs, while preserving all other oxc config inheritance
(e.g.
targetfor decorators support per #430).What alternatives have been explored?
config.oxcat all, cherry-picking specific options only:Would break the existing behavior of inheriting user-configured oxc options
like
target. Also fragile against future oxc option additions.jsxentirely (jsx: undefined):Too aggressive — users with
.tsxVue components may have legitimate JSXconfig they want to flow through.
jsx.refresh:Surgical. Preserves all other oxc config inheritance while blocking the
single problematic option. Self-documenting: makes it obvious that React
Fast Refresh has no place in Vue SFC transforms.
Are there any parts that require more attention from reviewers?
The fix is a four-line addition. The key consideration is whether there are
other Oxc options beyond
jsx.refreshthat@vitejs/plugin-reactor similarReact tooling might set globally that could also leak into Vue SFCs. I believe
refreshis the only one with this characteristic — other JSX options likejsxRuntimeandimportSourceare React-specific and wouldn't producemeaningful output for
.vuefiles anyway.Tests included
A new test playground
playground/vue-refresh-bug/with:vite.config.tssettingoxc.jsx.refresh = true(simulating@vitejs/plugin-react)RefreshBug.vue—<script setup lang="ts">callinguseSlots()$RefreshSig$or
$RefreshReg$appear in browser logs/page errorsFull test suite (
pnpm test-serve+pnpm test-build): 13 files, 104 tests,zero regressions.