vite-plugin-imp

2.4.0 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Error: [vite-plugin-imp] The library 'XXX' is not found in the 'libList' configuration. ↓

cause You are using a library that is not in the built-in list or not manually configured in libList.

fix

Add an entry for the library in the libList array, providing a style function.

error SyntaxError: Cannot use import statement outside a module ↓

cause Using require() to import the plugin in a CommonJS context.

fix

Use ESM import syntax: import vitePluginImp from 'vite-plugin-imp'

error TypeError: vitePluginImp is not a function ↓

cause Using named import { vitePluginImp } instead of default import.

fix

Use default import: import vitePluginImp from 'vite-plugin-imp'

error Error: [vite-plugin-imp] The plugin requires Vite >= 2.0.0-beta.5 ↓

cause Your Vite version is too old.

fix

Upgrade Vite to version >= 2.0.0-beta.5.

error Module not found: Error: Can't resolve 'vite-plugin-imp' ↓

cause The package is not installed or is installed as devDependency and not available in the build environment.

fix

Run npm install vite-plugin-imp -D or ensure it is in devDependencies.

Warnings

breaking Deprecated in favor of unplugin-vue-components for Vue projects. vite-plugin-imp may not receive future updates. ↓

fix Migrate to unplugin-vue-components (and unplugin-auto-import) for better compatibility with Vite 3+.

gotcha replaceOldImport defaults to false in serve mode and true in build mode. This can lead to inconsistent behavior between development and production. ↓

fix Explicitly set replaceOldImport in the config to make behavior consistent across serve and build.

gotcha Built-in resolvers expect libraries to be listed in dependencies, not devDependencies, otherwise style import may fail. ↓

fix Ensure libraries like antd, element-plus, etc. are in your package.json dependencies.

gotcha 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. ↓

fix Avoid dynamic imports of library components if you rely on this plugin; use static top-level imports instead.

deprecated Built-in resolvers are static and may become outdated as UI libraries evolve. Newer libraries are not added. ↓

fix Consider using unplugin-vue-components which has a more active resolver ecosystem.

Install

npm install vite-plugin-imp

yarn add vite-plugin-imp

pnpm add vite-plugin-imp

Imports

default

wrong

const vitePluginImp = require('vite-plugin-imp')

correct

import vitePluginImp from 'vite-plugin-imp'

ESM-only; default export is the plugin function.

vitePluginImp

wrong

import { vitePluginImp } from 'vite-plugin-imp'

correct

import vitePluginImp from 'vite-plugin-imp'

This package exports a default function, not a named export.

LibItem

wrong

import { LibItem } from 'vite-plugin-imp'

correct

import type { LibItem } from 'vite-plugin-imp'

LibItem is a TypeScript type; import as type to avoid runtime inclusion.

ImpConfig

wrong

import { ImpConfig } from 'vite-plugin-imp'

correct

import type { ImpConfig } from 'vite-plugin-imp'

ImpConfig is a TypeScript type; import as type.

Quickstart

Configures vite-plugin-imp to auto-import lodash methods as deep imports and antd styles.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vitePluginImp from 'vite-plugin-imp';

export default defineConfig({
  plugins: [
    vue(),
    vitePluginImp({
      libList: [
        {
          libName: 'lodash',
          libDirectory: '',
          camel2DashComponentName: false,
        },
        {
          libName: 'antd',
          style(name) {
            return `antd/es/${name}/style/index.js`;
          },
        },
      ],
    }),
  ],
});