Registry / web-framework / vite-plugin-importer

vite-plugin-importer

library0.2.5jsnpmunverified

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.

web-framework

npm install vite-plugin-importer

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-IMPORT

vite-plugin-importer

web-frameworkjavascriptv0.2.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

usePluginImport

✓ import usePluginImport from 'vite-plugin-importer'

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

Default export; ESM-only since v0.2

vite-plugin-importer (as Plugin)

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

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

Named import is incorrect; it's a default export

usePluginImport (with options)

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

✗ usePluginImport('antd')

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

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', }), ], });

Debug

Known issues

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

fix

Use matching Vite version or check plugin's peerDependencies.

affects: <=0.2.5

gotchaStyle 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.

affects: >=0.0.0

deprecatedConfiguration format mirrors babel-plugin-import, which may change.

fix

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

affects: >=0.0.0

Errors

Common errors & fixes

Cannot find module 'vite-plugin-importer'

Package not installed

fix

npm install vite-plugin-importer

TypeError: usePluginImport is not a function

Incorrect import: named import instead of default

fix

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

SyntaxError: Cannot use import statement outside a module

Using ES import in CommonJS file without type: module

fix

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

Upgrade

Version history

0.2.5latest on npm

Audit

Dependencies

babel-plugin-importrequiredcore dependency for import transformation logic

magic-stringrequiredfor string manipulation in Vite transforms

Agent activity

13 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ajuner/vite-plugin-importer ↗

packagehttps://www.npmjs.com/package/vite-plugin-importer ↗