{"id":20670,"library":"vite-plugin-importer","title":"vite-plugin-importer","description":"Vite plugin that integrates babel-plugin-import for on-demand library import transformation. Current stable version 0.2.5, updated occasionally. It allows importing UI libraries (antd, ant-design-vue, vant, element-plus) with automatic style and component resolution in Vite projects, similar to babel-plugin-import, but designed for Vite's plugin system without requiring Babel directly.","status":"active","version":"0.2.5","language":"javascript","source_language":"en","source_url":"https://github.com/ajuner/vite-plugin-importer","tags":["javascript","babel-plugin-import","vite"],"install":[{"cmd":"npm install vite-plugin-importer","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-importer","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-importer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"core dependency for import transformation logic","package":"babel-plugin-import","optional":false},{"reason":"for string manipulation in Vite transforms","package":"magic-string","optional":false}],"imports":[{"note":"Default export; ESM-only since v0.2","wrong":"const usePluginImport = require('vite-plugin-importer')","symbol":"usePluginImport","correct":"import usePluginImport from 'vite-plugin-importer'"},{"note":"Named import is incorrect; it's a default export","wrong":"import { usePluginImport } from 'vite-plugin-importer'","symbol":"vite-plugin-importer (as Plugin)","correct":"import usePluginImport from 'vite-plugin-importer'; export default { plugins: [usePluginImport({...})] }"},{"note":"Options object required; same as babel-plugin-import config","wrong":"usePluginImport('antd')","symbol":"usePluginImport (with options)","correct":"usePluginImport({ libraryName: 'antd', libraryDirectory: 'es', style: 'css' })"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport usePluginImport from 'vite-plugin-importer';\n\nexport default defineConfig({\n  plugins: [\n    usePluginImport({\n      libraryName: 'ant-design-vue',\n      libraryDirectory: 'es',\n      style: 'css',\n    }),\n    usePluginImport({\n      libraryName: 'antd',\n      libraryDirectory: 'es',\n      style: 'css',\n    }),\n  ],\n});","lang":"javascript","description":"Basic setup for ant-design-vue and antd with on-demand import and CSS injection."},"warnings":[{"fix":"Use matching Vite version or check plugin's peerDependencies.","message":"Vite version compatibility: Works only with Vite 2.x and 3.x? Unclear.","severity":"breaking","affected_versions":"<=0.2.5"},{"fix":"Provide custom style function as shown in README for libraries like element-plus.","message":"Style import may not work with all libraries; custom CSS paths required for some.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Refer to babel-plugin-import documentation for supported options.","message":"Configuration format mirrors babel-plugin-import, which may change.","severity":"deprecated","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install vite-plugin-importer","cause":"Package not installed","error":"Cannot find module 'vite-plugin-importer'"},{"fix":"Use default import: import usePluginImport from 'vite-plugin-importer'","cause":"Incorrect import: named import instead of default","error":"TypeError: usePluginImport is not a function"},{"fix":"Add \"type\": \"module\" to package.json or use .mjs extension","cause":"Using ES import in CommonJS file without type: module","error":"SyntaxError: Cannot use import statement outside a module"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}