Vite Plugin SWC React

0.1.12 verified Fri May 01 auth: no javascript maintenance

A Vite plugin that replaces Babel with SWC for fast React JSX transform, HMR, and optional polyfill/transpile via SWC's preset-env. Current version 0.1.12 has no recent updates; peer dependencies are @swc/core ^1.2.98 and Vite ^2.6.7+. It offers similar features to @vitejs/plugin-react but uses SWC for faster compilation. Differentiators include built-in polyfill mode and classic JSX runtime support. Release cadence is unknown (last update likely 2022).

Common errors

error Error: The plugin 'vite:react-swc' is not compatible with Vite 3 ↓

cause Package only supports Vite 2 peer dep.

fix

Use @vitejs/plugin-react-swc for Vite 3+

error Cannot find module 'core-js' or 'browserslist' while using polyfill ↓

cause Missing required dependencies for polyfill mode.

fix

npm install core-js && npm install -D browserslist

error Module parse failed: Unexpected token (1:14) - You may need an appropriate loader to handle this file type ↓

cause JSX not transformed when plugin not properly configured or Vite version mismatch.

fix

Ensure vite-plugin-swc-react is added to plugins array and Vite version is 2.x.

Warnings

breaking Package is compatible only with Vite 2, not Vite 3+ or 4+. Installing on newer Vite versions will cause errors. ↓

fix Use @vitejs/plugin-react-swc or vite-plugin-swc-react-refresh instead, or downgrade Vite to ^2.6.7.

gotcha HMR (React Refresh) is enabled by default but can be disabled via `reactFresh: false`. If HMR fails, try disabling it. ↓

fix Set swcReact({ reactFresh: false }) in plugin config.

gotcha When using polyfill mode, you must install both `browserslist` (devDep) and `core-js` (dep) manually. Missing them causes runtime errors. ↓

fix Install npm install -D browserslist && npm install core-js

Install

npm install vite-plugin-swc-react

yarn add vite-plugin-swc-react

pnpm add vite-plugin-swc-react

Imports

default

wrong

const swcReact = require('vite-plugin-swc-react')

correct

import swcReact from 'vite-plugin-swc-react'

ESM-only; CommonJS require() will fail in Vite's ESM context.

swcReact

wrong

const { swcReact } = require('vite-plugin-swc-react')

correct

import swcReact from 'vite-plugin-swc-react'

Package exports default export, not named.

type definitions

wrong

import { VitePluginSwcReact } from 'vite-plugin-swc-react'

correct

import swcReact from 'vite-plugin-swc-react'

Types are attached to default export; no separate type export.

Quickstart

Configure Vite to use SWC for React JSX transform, replacing the default Babel-based plugin.

import { defineConfig } from 'vite';
import swcReact from 'vite-plugin-swc-react';

export default defineConfig({
  plugins: [
    swcReact()
  ]
});