What is @vitejs/plugin-react-swc?
@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.
What are @vitejs/plugin-react-swc's main functionalities?
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"
}
}
}
}]
]
}
```
Other packages similar to @vitejs/plugin-react-swc
@vitejs/plugin-react
@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
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.
@vitejs/plugin-react-swc
Speed up your Vite dev server with SWC
Installation
npm i -D @vitejs/plugin-react-swc
Usage
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
export default defineConfig({
plugins: [react()],
});
Caveats
This plugin has limited options to enable good performances and be transpiler agnostic. Here is the list of non-configurable options that impact runtime behaviour:
- useDefineForClassFields is always activated, as this matches the current ECMAScript spec
jsx runtime
is always automatic
- In development:
- esbuild is disabled, so the esbuild configuration has no effect
target
is es2020
- JS files are not transformed
- tsconfig is not resolved, so properties other than the ones listed above behaves like TS defaults
Options
jsxImportSource
Control where the JSX factory is imported from.
react({ jsxImportSource: "@emotion/react" });
tsDecorators
Enable TypeScript decorators. Requires experimentalDecorators
in tsconfig.
react({ tsDecorators: true });
plugins
Use SWC plugins. Enable SWC at build time.
react({ plugins: [["@swc/plugin-styled-components", {}]] });
Consistent components exports
For React refresh to work correctly, your file should only export React components. The best explanation I've read is the one from the Gatsby docs.
If an incompatible change in exports is found, the module will be invalidated and HMR will propagate. To make it easier to export simple constants alongside your component, the module is only invalidated when their value changes.
You can catch mistakes and get more detailed warning with this eslint rule.
Migrating from vite-plugin-swc-react-refresh
The documentation for the previous version of the plugin is available in the v2 branch
To migrate, see this changelog