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.

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/runtime/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.