Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@vitejs/plugin-react-swc
Advanced tools
Use the versatility of SWC for development and the maturity of esbuild for production
@vitejs/plugin-react-swc is a Vite plugin that enables the use of React with the SWC (Speedy Web Compiler) compiler. This plugin provides faster build times and improved performance for React applications by leveraging SWC's capabilities.
Basic Setup
This code demonstrates how to include the @vitejs/plugin-react-swc plugin in a Vite configuration file. This setup allows Vite to use SWC for compiling React code.
```json
{
"plugins": [
"@vitejs/plugin-react-swc"
]
}
```
Custom SWC Configuration
This code sample shows how to customize the SWC configuration within the Vite plugin. It configures SWC to parse TypeScript and use the automatic JSX runtime.
```json
{
"plugins": [
["@vitejs/plugin-react-swc", {
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": true
},
"transform": {
"react": {
"runtime": "automatic"
}
}
}
}]
]
}
```
@vitejs/plugin-react is another Vite plugin for React, but it uses Babel instead of SWC for compilation. While it is more mature and has broader support for various Babel plugins, it may not offer the same performance benefits as SWC.
vite-plugin-swc is a general-purpose SWC plugin for Vite that can be used with various frameworks, including React. It provides similar performance benefits as @vitejs/plugin-react-swc but requires more manual configuration for React-specific features.
Use the versatility of SWC for development and the maturity of esbuild for production.
⚠️ This is a beta release for Vite 4, for the v2 named
vite-plugin-swc-react-refresh
, see the v2 branch.
npm i -D @vitejs/plugin-react-swc
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
export default defineConfig({
plugins: [react()],
});
This plugin is only used in development and aims to be kept simple to enable good performances and be transpiler agnostic. Here is the list of non-configurable options that impact runtime behaviour:
jsx runtime
is always automatic
target
is es2020
For React refresh to work, your file should only export React components. The best explanation I've read is the one from the Gatsby docs.
You can catch mistakes and get more detailed warning with this eslint rule.
FAQs
Speed up your Vite dev server with SWC
We found that @vitejs/plugin-react-swc demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.