{"id":22706,"library":"vite-plugin-import","title":"vite-plugin-import","description":"Component modular import plugin for Vite (v0.4.0, last updated 2021). Converts named imports like `import { Button } from 'antd'` into path-level imports (e.g., `antd/lib/button`) to reduce bundle size, leveraging babel-plugin-import under the hood. Works primarily in build mode by default. Requires Vite 2. Note that tree-shakable libraries (like antd) do not need this plugin, as Vite handles unused code removal. Faster than combining `@rollup/plugin-babel` with babel-plugin-import, but limited to import transformation only.","status":"active","version":"0.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/meowtec/vite-plugin-import","tags":["javascript","vite","antd"],"install":[{"cmd":"npm install vite-plugin-import","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-import","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; requires Vite 2.x","package":"vite","optional":false}],"imports":[{"note":"ESM-only; does not support CommonJS require.","wrong":"const createImportPlugin = require('vite-plugin-import')","symbol":"default (createImportPlugin)","correct":"import createImportPlugin from 'vite-plugin-import'"},{"note":"Package exports a default function, not a named export.","wrong":"import { createImportPlugin } from 'vite-plugin-import'","symbol":"default with named import syntax","correct":"import createImportPlugin from 'vite-plugin-import'"},{"note":"In CommonJS context, use dynamic import and destructure default.","wrong":"const createImportPlugin = require('vite-plugin-import')","symbol":"createImportPlugin via CJS dynamic import","correct":"const { default: createImportPlugin } = await import('vite-plugin-import')"}],"quickstart":{"code":"// vite.config.js\nimport createImportPlugin from 'vite-plugin-import';\n\nexport default {\n  plugins: [\n    createImportPlugin([\n      {\n        libraryName: 'antd',\n        style: true, // or 'css'\n      },\n    ]),\n  ],\n};","lang":"javascript","description":"Shows how to configure vite-plugin-import to transform antd imports. The plugin converts named imports to path-level imports and optionally injects style imports."},"warnings":[{"fix":"Set `onlyBuild: false` in plugin options to enable transformation in both dev and build modes.","message":"Plugin only works effectively in build mode by default (onlyBuild: true). During dev (vite serve), imports are not transformed, which may lead to inconsistency if you rely on side-effects from style imports.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use @rollup/plugin-babel + babel-plugin-import instead for custom babel configuration.","message":"vite-plugin-import is essentially a wrapper around babel + babel-plugin-import. It does not support other babel plugins; use @rollup/plugin-babel if you need additional babel transforms.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Omit the plugin for tree-shakable libraries; verify with a bundle analyzer.","message":"Tree-shakable libraries (e.g., antd v4+) do not benefit from this plugin because Vite already eliminates unused exports during build. Unnecessary transformation may even increase build time.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Stay on Vite 2 or switch to alternative (e.g., unplugin-auto-import or manual imports).","message":"Requires Vite 2; incompatible with Vite 3+.","severity":"breaking","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `npm install vite-plugin-import --save-dev`.","cause":"Package not installed or missing from dependencies.","error":"Error: Cannot find module 'vite-plugin-import'"},{"fix":"Use `import createImportPlugin from 'vite-plugin-import'` (no curly braces).","cause":"Importing as named export instead of default export.","error":"TypeError: createImportPlugin is not a function"},{"fix":"Install Vite 2.x: `npm install vite@2`.","cause":"Missing Vite peer dependency.","error":"Error: The node module 'vite' is not a peer dependency of 'vite-plugin-import'."},{"fix":"Install babel-plugin-import: `npm install babel-plugin-import --save-dev`.","cause":"vite-plugin-import uses babel internally; if babel-plugin-import is missing, this error may appear.","error":"Error: Cannot find module 'babel-plugin-import'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}