vite-plugin-importer

0.2.5 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Cannot find module 'vite-plugin-importer' ↓

cause Package not installed

fix

npm install vite-plugin-importer

error TypeError: usePluginImport is not a function ↓

cause Incorrect import: named import instead of default

fix

Use default import: import usePluginImport from 'vite-plugin-importer'

error SyntaxError: Cannot use import statement outside a module ↓

cause Using ES import in CommonJS file without type: module

fix

Add "type": "module" to package.json or use .mjs extension

Warnings

breaking Vite version compatibility: Works only with Vite 2.x and 3.x? Unclear. ↓

fix Use matching Vite version or check plugin's peerDependencies.

gotcha Style import may not work with all libraries; custom CSS paths required for some. ↓

fix Provide custom style function as shown in README for libraries like element-plus.

deprecated Configuration format mirrors babel-plugin-import, which may change. ↓

fix Refer to babel-plugin-import documentation for supported options.

Install

npm install vite-plugin-importer

yarn add vite-plugin-importer

pnpm add vite-plugin-importer

Imports

usePluginImport

wrong

const usePluginImport = require('vite-plugin-importer')

correct

import usePluginImport from 'vite-plugin-importer'

Default export; ESM-only since v0.2

vite-plugin-importer (as Plugin)

wrong

import { usePluginImport } from 'vite-plugin-importer'

correct

import usePluginImport from 'vite-plugin-importer'; export default { plugins: [usePluginImport({...})] }

Named import is incorrect; it's a default export

usePluginImport (with options)

wrong

usePluginImport('antd')

correct

usePluginImport({ libraryName: 'antd', libraryDirectory: 'es', style: 'css' })

Options object required; same as babel-plugin-import config

Quickstart

Basic setup for ant-design-vue and antd with on-demand import and CSS injection.

// vite.config.js
import { defineConfig } from 'vite';
import usePluginImport from 'vite-plugin-importer';

export default defineConfig({
  plugins: [
    usePluginImport({
      libraryName: 'ant-design-vue',
      libraryDirectory: 'es',
      style: 'css',
    }),
    usePluginImport({
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: 'css',
    }),
  ],
});