Registry / web-framework / vite-plugin-babel-import

vite-plugin-babel-import

library2.0.5jsnpmunverified

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.

web-framework devops

npm install vite-plugin-babel-import

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-BABEL-

vite-plugin-babel-import

web-frameworkjavascriptv2.0.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vitePluginImport (default)

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

✗ const vitePluginImport = require('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

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

✗ vitePluginImport({ libraryName: 'vant' })

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

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';

Debug

Known issues

deprecatedvite-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.

affects: >=2.0.0

gotchaBabel transformation works only in development? Not clear; production behavior may differ.

fix

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

affects: >=2.0.0

gotchaPlugin expects array of config objects, not a single object.

fix

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

affects: >=2.0.0

breakingVersion 2.0.0 dropped support for older Vite? Check changelog.

fix

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

affects: >=2.0.0

gotchaStyle function receives name in kebab-case? May depend on library.

fix

Log the name parameter to verify casing.

affects: >=2.0.0

Errors

Common errors & fixes

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

Package not installed or wrong import path.

fix

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

TypeError: plugin is not a function

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

fix

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

TypeError: libraryName is undefined

Passed a single object instead of array.

fix

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

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

Custom library not configured.

fix

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

Upgrade

Version history

2.0.5latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

16 hits · last 30 days

node

Resources

githubhttps://github.com/0ahz/vite-plugin-babel-import ↗

packagehttps://www.npmjs.com/package/vite-plugin-babel-import ↗