Vite using SWC

tip

Many applications do not require this plugin. Unless you have been directed here by other documentation, you can probably skip these instructions. See “Should I install the plugin?” for more information.

info

These instructions are for use with @vitejs/plugin-react-swc. If you are using @vitejs/plugin-react you'll need to use the Babel instructions.

SWC PLUGIN SUPPORT IS EXPERIMENTAL

@vitejs/plugin-react-swc v3.1.0 or above is required to support SWC plugins. We recommend using the latest version.

1. Install the @mightymeld/swc-plugin package:

   npm

   npm install --save-dev @mightymeld/swc-plugin

   Yarn

   yarn add --dev @mightymeld/swc-plugin

   pnpm

   pnpm add --save-dev @mightymeld/swc-plugin

2. Update your Vite config file to conditionally add the plugin:

   vite.config.ts

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react-swc';
   import { options } from '@mightymeld/swc-plugin/options';
   
   const plugins = [];
   
   if (process.env.MIGHTYMELD) {
     plugins.push(['@mightymeld/swc-plugin', options()]);
   }
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [
       react({
         plugins
       })
     ]
   });