Vite Plugin Babel Import

2.0.5 verified Sat Apr 25 auth: no javascript

A Vite plugin that transforms component library imports from named imports to individual path imports, automatically appending CSS imports. Version 2.0.5 is the current stable release. It mimics babel-plugin-import behavior in the Vite ecosystem, supporting libraries like Vant, Element Plus, and Ant Design Vue. The plugin operates as a Babel plugin during Vite's transform phase, offering configuration for library directory and style path customization. Compared to manual tree-shaking or full imports, it provides automatic granular imports without additional build configuration.

Common errors

error Error: Cannot find module 'vite-plugin-babel-import' ↓

cause Package not installed or wrong import path.

fix

Run npm install vite-plugin-babel-import --save-dev and ensure import path matches package name.

error TypeError: plugin is not a function ↓

cause Incorrect usage of imported default (e.g., using require or destructuring).

fix

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

error TypeError: libraryName is undefined ↓

cause Passed a single object instead of array.

fix

Wrap config in array: vitePluginImport([{ libraryName: 'vant' }])

error The library 'x' is not supported by this plugin. ↓

cause Custom library not configured.

fix

Add a new config entry for the library in the plugin options.

Warnings

deprecated vite-plugin-babel-import may not be actively maintained; check for Vite 5 compatibility. ↓

fix Consider using unplugin-vue-components or manual tree-shaking for newer Vite versions.

gotcha Babel transformation works only in development? Not clear; production behavior may differ. ↓

fix Test both dev and build outputs to ensure transformations are applied.

gotcha Plugin expects array of config objects, not a single object. ↓

fix Wrap single config in an array: vitePluginImport([{ ... }])

breaking Version 2.0.0 dropped support for older Vite? Check changelog. ↓

fix Ensure Vite >=3.x; if on Vite 2, use older version.

gotcha Style function receives name in kebab-case? May depend on library. ↓

fix Log the name parameter to verify casing.

Install

npm install vite-plugin-babel-import

yarn add vite-plugin-babel-import

pnpm add vite-plugin-babel-import

Imports

vitePluginImport (default)

wrong

const vitePluginImport = require('vite-plugin-babel-import')

correct

import vitePluginImport from 'vite-plugin-babel-import'

The package exports a default function. Use ESM import in Vite config.

TypeScript types (if any)
```
import type { VitePluginBabelImportOptions } from 'vite-plugin-babel-import'
```
Types are exported but not officially documented; check if available.

Plugin usage in config

wrong

vitePluginImport({ libraryName: 'vant' })

correct

vitePluginImport([{ libraryName: 'vant', libraryDirectory: 'es', style(name) { return `vant/es/${name}/index.css`; } }])

The plugin expects an array of config objects. Single object is a common mistake.

Quickstart

Setup vite-plugin-babel-import in Vite config and demonstrate transformation of a named import to individual path plus CSS import.

// vite.config.js
import { defineConfig } from 'vite';
import vitePluginImport from 'vite-plugin-babel-import';

export default defineConfig({
  plugins: [
    vitePluginImport([
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style(name) {
          return `vant/es/${name}/index.css`;
        },
      },
    ]),
  ],
});

// Then in your app:
import { Button } from 'vant';
// Transforms to:
// import Button from 'vant/es/button';
// import 'vant/es/button/index.css';