@vitejs/plugin-react-swc
Advanced tools
Package description
@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.
esbuild-plugin-react is a plugin for using React with esbuild, another fast JavaScript bundler and minifier. While esbuild is known for its speed, it may not have as many features or as much flexibility as SWC.
Changelog
Readme
Speed up your Vite dev server with SWC
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 has limited options to enable good performances and be transpiler agnostic. Here is the list of non-configurable options that impact runtime behaviour:
jsx runtime is always automatictarget is es2020Control where the JSX factory is imported from.
@default "react"
react({ jsxImportSource: "@emotion/react" });
Enable TypeScript decorators. Requires experimentalDecorators in tsconfig.
@default false
react({ tsDecorators: true });
Use SWC plugins. Enable SWC at build time.
react({ plugins: [["@swc/plugin-styled-components", {}]] });
Set the target for SWC in dev. This can avoid to down-transpile private class method for example.
For production target, see https://vitejs.dev/config/build-options.html#build-target.
@default "es2020"
react({ devTarget: "es2022" });
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.
vite-plugin-swc-react-refreshThe documentation for the previous version of the plugin is available in the v2 branch
To migrate, see this changelog
FAQs
Unknown package
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.
Security News
The maintainer of the node-ip project restored the GitHub repo after disputing an exaggerated CVE rating, highlighting the impact of bogus CVEs on open source projects.
Security News
pnpm 9.5 introduces a Catalogs feature, enabling shareable dependency version specifiers, reducing merge conflicts and improving support for monorepos.
Security News
A threat actor on BreachForums is selling an unverified npm vulnerability for account takeover, but npm has not officially confirmed the existence of this security concern.