vite-plugin-babel

1.6.0 verified Sat Apr 25 auth: no javascript

Integrates Babel transformation directly into Vite's dev server and build pipeline, allowing Babel plugins to run on all processed files during serve, build, and SSR. Version 1.6.0 supports Vite 2.7+ through 8 (inclusive) and requires @babel/core >=7.0.0. Unlike most Vite Babel integrations that only affect build, this plugin applies Babel across all Vite commands, making it useful for polyfills, code transforms, and custom syntax that Babel plugins provide. It's a thin wrapper that adds Babel as a Vite plugin, respecting Vite's cache and file-watching behavior.

Common errors

error Error: Cannot find module '@babel/core' ↓

cause @babel/core is not installed as a peer dependency.

fix

Install: npm install @babel/core --save-dev

error TypeError: vitePluginBabel is not a function ↓

cause Importing the package incorrectly (e.g., using named import instead of default).

fix

Use default import: import vitePluginBabel from 'vite-plugin-babel'

error Error: The 'filter' option is deprecated. Use 'include' and 'exclude' instead. ↓

cause Using the deprecated filter option in version >=1.5.0.

fix

Replace filter with include/exclude in plugin options.

Warnings

breaking Version 1.0.0 dropped support for Vite 2.x and below. ↓

fix Upgrade to Vite 2.7+ or pin to vite-plugin-babel@0.x.

gotcha Babel transformations only apply to files that Vite processes; files excluded by Vite's resolve.alias or optimizeDeps.exclude may not be transformed. ↓

fix Ensure files are included in Vite's module graph. Use filter/include/exclude options to control which files are transformed.

gotcha When using babelHelpers: 'runtime', you must install @babel/plugin-transform-runtime and @babel/runtime. ↓

fix Add '@babel/plugin-transform-runtime' to babelConfig.plugins and install @babel/runtime.

deprecated The 'filter' option (RegExp) is deprecated in favor of 'include' and 'exclude' arrays. ↓

fix Replace filter with include and exclude arrays of glob patterns or regexps.

gotcha If you use TypeScript, Babel may strip types and conflict with Vite's esbuild transform. Ensure esbuild is configured to not strip types if Babel handles it. ↓

fix Set esbuild.target to 'esnext' or disable esbuild's transform for .ts files.

Install

npm install vite-plugin-babel

yarn add vite-plugin-babel

pnpm add vite-plugin-babel

Imports

vitePluginBabel

wrong

const vitePluginBabel = require('vite-plugin-babel')

correct

import vitePluginBabel from 'vite-plugin-babel'

Default export is a function. ESM-only; require() will fail.

vitePluginBabel
wrong
```
import vitePluginBabel from 'vite-plugin-babel'
```
correct
```
import { vitePluginBabel } from 'vite-plugin-babel'
```
Named export also available if you prefer destructuring. Both work, but named export is explicit.

transformContent

wrong

import { transformContent } from 'vite-plugin-babel'

correct

import { transformContent } from 'vite-plugin-babel/helpers'

Internal helper exported from a subpath. Not part of main public API.

Quickstart

Configures Vite with vite-plugin-babel, enabling Babel transforms for JavaScript/TypeScript files in src/ during dev and build.

import { defineConfig } from 'vite';
import vitePluginBabel from 'vite-plugin-babel';

export default defineConfig({
  plugins: [
    vitePluginBabel({
      babelConfig: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-transform-runtime'],
      },
      filter: /\.[jt]sx?$/,
      include: /src\/.*/,
      exclude: /node_modules/,
      babelHelpers: 'runtime',
    }),
  ],
});