Vite using Babel

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. If you are using @vitejs/plugin-react-swc you'll need to use the SWC instructions.

1. Install the mightymeld package in your project:

   npm

   npm install --save-dev mightymeld

   Yarn

   yarn add --dev mightymeld

   pnpm

   pnpm add --save-dev mightymeld

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

   vite.config.ts

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

   If you already have a babel.config.cjs, see the "Other Frameworks" section for help extending your config file.