{"id":22704,"library":"vite-plugin-imp","title":"vite-plugin-imp","description":"Vite plugin for automatic import of UI library component styles and on-demand library imports (e.g., lodash). Version 2.4.0 supports Vite >= 2.0.0. It transforms named imports into deep imports with style files, with built-in resolvers for popular libraries like Ant Design, Element Plus, Vant, and Lodash. Key differentiators: automatic style injection without manual configuration, support for custom libraries via config, and built-in resolver presets. Default behavior replaces import statements only in build mode. Requires Vite 2+ and ships TypeScript definitions. Release cadence: minor updates as needed.","status":"active","version":"2.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/onebay/vite-plugin-imp","tags":["javascript","vite plugin imp","typescript"],"install":[{"cmd":"npm install vite-plugin-imp","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-imp","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-imp","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required to operate as a Vite plugin; version >= 2.0.0-beta.5","package":"vite","optional":false}],"imports":[{"note":"ESM-only; default export is the plugin function.","wrong":"const vitePluginImp = require('vite-plugin-imp')","symbol":"default","correct":"import vitePluginImp from 'vite-plugin-imp'"},{"note":"This package exports a default function, not a named export.","wrong":"import { vitePluginImp } from 'vite-plugin-imp'","symbol":"vitePluginImp","correct":"import vitePluginImp from 'vite-plugin-imp'"},{"note":"LibItem is a TypeScript type; import as type to avoid runtime inclusion.","wrong":"import { LibItem } from 'vite-plugin-imp'","symbol":"LibItem","correct":"import type { LibItem } from 'vite-plugin-imp'"},{"note":"ImpConfig is a TypeScript type; import as type.","wrong":"import { ImpConfig } from 'vite-plugin-imp'","symbol":"ImpConfig","correct":"import type { ImpConfig } from 'vite-plugin-imp'"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport vitePluginImp from 'vite-plugin-imp';\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    vitePluginImp({\n      libList: [\n        {\n          libName: 'lodash',\n          libDirectory: '',\n          camel2DashComponentName: false,\n        },\n        {\n          libName: 'antd',\n          style(name) {\n            return `antd/es/${name}/style/index.js`;\n          },\n        },\n      ],\n    }),\n  ],\n});","lang":"typescript","description":"Configures vite-plugin-imp to auto-import lodash methods as deep imports and antd styles."},"warnings":[{"fix":"Migrate to unplugin-vue-components (and unplugin-auto-import) for better compatibility with Vite 3+.","message":"Deprecated in favor of unplugin-vue-components for Vue projects. vite-plugin-imp may not receive future updates.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Explicitly set replaceOldImport in the config to make behavior consistent across serve and build.","message":"replaceOldImport defaults to false in serve mode and true in build mode. This can lead to inconsistent behavior between development and production.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure libraries like antd, element-plus, etc. are in your package.json dependencies.","message":"Built-in resolvers expect libraries to be listed in dependencies, not devDependencies, otherwise style import may fail.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Avoid dynamic imports of library components if you rely on this plugin; use static top-level imports instead.","message":"The plugin only transforms import statements that are at the top level of a module. Dynamic imports or conditional imports inside functions are not processed.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Consider using unplugin-vue-components which has a more active resolver ecosystem.","message":"Built-in resolvers are static and may become outdated as UI libraries evolve. Newer libraries are not added.","severity":"deprecated","affected_versions":">=2.4.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add an entry for the library in the libList array, providing a style function.","cause":"You are using a library that is not in the built-in list or not manually configured in libList.","error":"Error: [vite-plugin-imp] The library 'XXX' is not found in the 'libList' configuration."},{"fix":"Use ESM import syntax: import vitePluginImp from 'vite-plugin-imp'","cause":"Using require() to import the plugin in a CommonJS context.","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Use default import: import vitePluginImp from 'vite-plugin-imp'","cause":"Using named import { vitePluginImp } instead of default import.","error":"TypeError: vitePluginImp is not a function"},{"fix":"Upgrade Vite to version >= 2.0.0-beta.5.","cause":"Your Vite version is too old.","error":"Error: [vite-plugin-imp] The plugin requires Vite >= 2.0.0-beta.5"},{"fix":"Run npm install vite-plugin-imp -D or ensure it is in devDependencies.","cause":"The package is not installed or is installed as devDependency and not available in the build environment.","error":"Module not found: Error: Can't resolve 'vite-plugin-imp'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}