Registry / web-framework / vite-plugin-dynamic-import

vite-plugin-dynamic-import

JSON →
library1.6.0jsnpmunverified

Enhances Vite's built-in dynamic import support by adding alias resolution (e.g., `@/views/${variable}`), bare module imports from node_modules, and automatic file extension resolution. Current stable version 1.6.0, released regularly with contributions from the community. Differentiators: provides a 'loose' mode similar to Webpack's dynamic import behavior, resolves glob patterns to handle missing extensions and paths, and works around `@rollup/plugin-dynamic-import-vars` limitations. Requires Vite as a peer dependency and is used as a Vite plugin.

npm install vite-plugin-dynamic-import
INSTALL
IMPORT
SIG · VITE-PLUGIN-DYNAMI
V
vite-plugin-dynamic-import
web-frameworkjavascriptv1.6.0
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
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 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

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

default
import dynamicImport from 'vite-plugin-dynamic-import'
const dynamicImport = require('vite-plugin-dynamic-import')
ESM-only package; CommonJS require() will fail.
dynamicImport (default import)
import dynamicImport from 'vite-plugin-dynamic-import'
import { dynamicImport } from 'vite-plugin-dynamic-import'
The package exports a single function as default export, not a named export.
Options type
import type { Options } from 'vite-plugin-dynamic-import'
TypeScript users can import the Options interface for type checking, but it's not necessary at runtime.

Shows how to configure the plugin in vite.config.js to enable dynamic imports with aliases, node_modules inclusion, file filtering, and custom resolution.

// vite.config.js import { defineConfig } from 'vite' import dynamicImport from 'vite-plugin-dynamic-import' export default defineConfig({ plugins: [ dynamicImport({ loose: true, filter(id) { // default excludes node_modules; include if needed if (id.includes('/node_modules/some-module')) { return true } }, onFiles(files, id) { // exclude certain files like .d.ts return files.filter(f => !f.endsWith('.d.ts')) }, onResolve(rawImportee, id) { // prepend @vite-ignore to bypass Vite's dynamic import warning return `\/*@vite-ignore*\/ ${rawImportee}` } }) ] }) // router.js (example usage) const route = await import(`./views/${someVariable}.js`) // now supports aliases and missing extensions
Debug
Known issues
breakingThe plugin requires Vite 2.x or newer; Vite 1.x is not supported.
fix
Upgrade to Vite 2+
affects: vite-plugin-dynamic-import@>=1.0.0
gotchaBy default, the plugin excludes node_modules. You must explicitly set the `filter` option to include bare module imports from node_modules.
fix
Add a filter callback returning true for node_modules paths you want to transform.
affects: >=1.0.0
deprecatedIn version 1.5.0, the `onFiles` option was introduced; older versions had a different mechanism for excluding files.
fix
Use `onFiles` callback instead of previous undefined behavior.
affects: <1.5.0
gotchaWhen using `loose: true`, the plugin may over-match patterns and generate many switch cases, leading to large bundle sizes.
fix
Use `loose: false` for stricter matching similar to @rollup/plugin-dynamic-import-vars.
affects: >=1.0.0
gotchaThe plugin relies on Vite's resolve.alias and resolve.extensions configurations; dynamic imports may not work if these are not properly set.
fix
Define aliases in vite.config.js resolve.alias and set resolve.extensions as needed.
affects: >=1.0.0
Errors
Common errors & fixes
Error: Cannot find module 'vite-plugin-dynamic-import'
Using require() in a CommonJS context; package is ESM-only.
fix
Use import statement (ESM) or switch to an ESM module (e.g., type: "module" in package.json).
Dynamic import with alias not resolved: `import('@/views/${variable}')`
Alias is not recognized without the plugin; Vite does not resolve aliases in dynamic imports by default.
fix
Install and configure vite-plugin-dynamic-import in vite.config.js.
The plugin does not transform dynamic imports inside node_modules
The default filter excludes node_modules.
fix
Add a filter option that returns true for the specific module paths.
Module not found: Cannot resolve '...' (dynamic import with missing extension)
The dynamic import path does not include the file extension, and Vite cannot guess it.
fix
Ensure that resolve.extensions includes the needed extensions. The plugin helps but may require explicit globbing.
Upgrade
Version history
1.6.0latest on npm
Audit
Dependencies
viterequiredPeer dependency; requires Vite to function as a plugin
Agent activity
18 hits · last 30 days
node
16
OpenAI (training)
1
Resources
vite-plugin-dynamic-import — npm install vite-plugin-dynamic-import · libregistry