{"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,"search_vec":"'2':51 '2021':14 'antd':22,59,88 'antd/lib/button':29 'babel':36,77 'babel-plugin-import':35,76 'build':45 'bundl':32 'button':20 'code':69 'combin':73 'compon':5 'convert':15 'default':48 'e.g':28 'faster':71 'handl':67 'hood':41 'import':4,7,17,19,27,38,79,83 'javascript':86 'last':12 'level':26 'leverag':34 'librari':57 'like':18,58 'limit':81 'mode':46 'modular':6 'name':16 'need':62 'note':52 'path':25 'path-level':24 'plugin':3,8,37,64,78 'primarili':43 'reduc':31 'remov':70 'requir':49 'rollup/plugin-babel':74 'shakabl':56 'size':33 'transform':84 'tree':55 'tree-shak':54 'unus':68 'updat':13 'v0.4.0':11 'vite':2,10,50,66,87 'vite-plugin-import':1 'work':42","created_at":"2026-04-27T17:06:35.478738+00:00","updated_at":"2026-04-27T17:06:35.478738+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-import","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}