{"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,"search_vec":"'2.0.5':25 'addit':88 'ant':49 'append':21 'automat':20,84 'babel':3,34,57,93 'babel-plugin':92 'babel-plugin-import':33 'behavior':37 'build':89 'compar':73 'compon':10 'configur':65,90 'css':22 'current':28 'custom':72 'design':50 'directori':68 'ecosystem':41 'element':46 'full':80 'granular':85 'import':4,12,15,19,23,36,81,86 'individu':17 'javascript':91 'librari':11,43,67 'like':44 'manual':75 'mimic':32 'name':14 'offer':64 'oper':54 'path':18,71 'phase':63 'plugin':2,7,35,53,58,94,97 'plus':47 'provid':83 'releas':30 'shake':78 'stabl':29 'style':70 'support':42 'transform':9,62 'tree':77 'tree-shak':76 'vant':45 'version':24 'vite':1,6,40,60,96,98 'vite-plugin':95 'vue':51 'without':87","created_at":"2026-04-25T11:24:17.668502+00:00","updated_at":"2026-04-25T11:24:17.668502+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/0ahz/vite-plugin-babel-import","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-babel-import","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}