{"id":20658,"library":"vite-plugin-babel-import","title":"Vite Plugin Babel Import","description":"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.","status":"active","version":"2.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/0ahz/vite-plugin-babel-import","tags":["javascript","babel-plugin","vite-plugin","vite"],"install":[{"cmd":"npm install vite-plugin-babel-import","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-babel-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-babel-import","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The package exports a default function. Use ESM import in Vite config.","wrong":"const vitePluginImport = require('vite-plugin-babel-import')","symbol":"vitePluginImport (default)","correct":"import vitePluginImport from 'vite-plugin-babel-import'"},{"note":"Types are exported but not officially documented; check if available.","wrong":"","symbol":"TypeScript types (if any)","correct":"import type { VitePluginBabelImportOptions } from 'vite-plugin-babel-import'"},{"note":"The plugin expects an array of config objects. Single object is a common mistake.","wrong":"vitePluginImport({ libraryName: 'vant' })","symbol":"Plugin usage in config","correct":"vitePluginImport([{ libraryName: 'vant', libraryDirectory: 'es', style(name) { return `vant/es/${name}/index.css`; } }])"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport vitePluginImport from 'vite-plugin-babel-import';\n\nexport default defineConfig({\n  plugins: [\n    vitePluginImport([\n      {\n        libraryName: 'vant',\n        libraryDirectory: 'es',\n        style(name) {\n          return `vant/es/${name}/index.css`;\n        },\n      },\n    ]),\n  ],\n});\n\n// Then in your app:\nimport { Button } from 'vant';\n// Transforms to:\n// import Button from 'vant/es/button';\n// import 'vant/es/button/index.css';","lang":"javascript","description":"Setup vite-plugin-babel-import in Vite config and demonstrate transformation of a named import to individual path plus CSS import."},"warnings":[{"fix":"Consider using unplugin-vue-components or manual tree-shaking for newer Vite versions.","message":"vite-plugin-babel-import may not be actively maintained; check for Vite 5 compatibility.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Test both dev and build outputs to ensure transformations are applied.","message":"Babel transformation works only in development? Not clear; production behavior may differ.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Wrap single config in an array: vitePluginImport([{ ... }])","message":"Plugin expects array of config objects, not a single object.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure Vite >=3.x; if on Vite 2, use older version.","message":"Version 2.0.0 dropped support for older Vite? Check changelog.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Log the name parameter to verify casing.","message":"Style function receives name in kebab-case? May depend on library.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install vite-plugin-babel-import --save-dev` and ensure import path matches package name.","cause":"Package not installed or wrong import path.","error":"Error: Cannot find module 'vite-plugin-babel-import'"},{"fix":"Use default import: `import vitePluginImport from 'vite-plugin-babel-import'`","cause":"Incorrect usage of imported default (e.g., using require or destructuring).","error":"TypeError: plugin is not a function"},{"fix":"Wrap config in array: `vitePluginImport([{ libraryName: 'vant' }])`","cause":"Passed a single object instead of array.","error":"TypeError: libraryName is undefined"},{"fix":"Add a new config entry for the library in the plugin options.","cause":"Custom library not configured.","error":"The library 'x' is not supported by this plugin."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}