Skip to content

docs(react-swc): deprecate plugin react swc #1106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
sapphi-red wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

docs(react-swc): deprecate plugin react swc #1106

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
40e7969
docs: deprecate `@vitejs/plugin-react-swc`
sapphi-red Feb 13, 2026
a243906
chore: try migrating
sapphi-red Feb 13, 2026
0e5055a
chore: revert "chore: try migrating"
sapphi-red Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 99 additions & 0 deletions packages/plugin-react-swc/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,104 @@
# @vitejs/plugin-react-swc [![npm](https://img.shields.io/npm/v/@vitejs/plugin-react-swc)](https://www.npmjs.com/package/@vitejs/plugin-react-swc)

> ![CAUTION]
> This plugin is now deprecated.
>
> Vite 8 now uses [Oxc](https://oxc.rs/) for fast refresh transform.
> If you do not need other SWC-specific transforms, you can use [`@vitejs/plugin-react`](https://github.com/vitejs/vite/tree/main/packages/plugin-react) instead.
>
> If you were using this plugin without any options or only the following options:
>
> - `jsxImportSource`
> - `tsDecorators` (remove this option after changing the plugin)
> - `devTarget` (use `oxc.target` instead)
> - `reactRefreshHost`
>
> , you can simply change the import:
>
> ```ts
> import { defineConfig } from 'vite'
> import react from '@vitejs/plugin-react' // <-- without `-swc`
>
> export default defineConfig({
> plugins: [
> react({
> jsxImportSource: 'reactlike', // if it was used
> reactRefreshHost: 'http://localhost:3000', // if it was used
> }),
> ],
> })
> ```
>
> If you were using this plugin with options:
>
> ```ts
> import { defineConfig } from 'vite'
> import react from '@vitejs/plugin-react-swc'
>
> export default defineConfig({
> plugins: [
> react({
> jsxImportSource: 'reactlike',
> tsDecorators: true,
> plugins: [['@swc/plugin-emotion', {}]],
> devTarget: 'es2022',
> reactRefreshHost: 'http://localhost:3000',
> }),
> ],
> })
> ```
>
> , you can use `@rollup/plugin-swc` alongside `@vitejs/plugin-react`:
>
> ```
> import { defineConfig, withFilter } from 'vite'
> import react from '@vitejs/plugin-react'
> import swc from '@rollup/plugin-swc'
> import { makeIdFiltersToMatchWithQuery } from '@rolldown/pluginutils'
>
> export default defineConfig({
> plugins: [
> ['tsx', 'ts', 'jsx', 'js'].map(ext => withFilter(
> {
> ...swc({
> swc: {
> swcrc: false,
> configFile: false,
> sourceMaps: true,
> jsc: {
> // if `devTarget` was set. use `esnext` if it wasn't
> target: 'es2022',
> parser: {
> syntax: ext === 'tsx' || ext === 'ts' ? 'typescript' : 'ecmascript',
> decorators: ext === 'tsx' || ext === 'ts', // if `tsDecorators: true` were set
> jsx: ext === 'tsx' || ext === 'jsx',
> },
> experimental: {
> // if `plugins` were set
> plugins: [['@swc/plugin-emotion', {}]],
> },
> transform: {
> useDefineForClassFields: true,
> react: {
> runtime: 'preserve',
Copy link
Member

@ArnaudBarre ArnaudBarre Feb 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you do need importSource: 'reactlike' here

Copy link
Member Author

@sapphi-red sapphi-red Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The idea was to leave things as-is as much as possible in the SWC pass (TS -> JS is done because SWC doesn't have an option to disable it). We can do it in the opposite way as you suggested.

Copy link
Member

@ArnaudBarre ArnaudBarre Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yeah I missed the 'preserve'
Yeah it makes it a bit more confusing to have TSX->JSX in SWC and then JSX->JS with oxc

> }
> }
> },
> },
> }),
> // run SWC before JSX/TS/TSX transformations
> enforce: 'pre',
> },
> { transform: { id: makeIdFiltersToMatchWithQuery(new RegExp(`\\.${ext}$`)) } },
> )),
> react({
> jsxImportSource: 'reactlike',
> reactRefreshHost: 'http://localhost:3000',
> })
> ],
> });
> ```

Speed up your Vite dev server with [SWC](https://swc.rs/)

- ✅ A fast Fast Refresh (~20x faster than Babel)
Expand Down
Loading