{"id":20664,"library":"vite-plugin-dynamic-import","title":"Vite Plugin Dynamic Import","description":"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.","status":"active","version":"1.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/vite-plugin/vite-plugin-dynamic-import","tags":["javascript","vite","plugin","import","dynamic","typescript"],"install":[{"cmd":"npm install vite-plugin-dynamic-import","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-dynamic-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-dynamic-import","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; requires Vite to function as a plugin","package":"vite","optional":false}],"imports":[{"note":"ESM-only package; CommonJS require() will fail.","wrong":"const dynamicImport = require('vite-plugin-dynamic-import')","symbol":"default","correct":"import dynamicImport from 'vite-plugin-dynamic-import'"},{"note":"The package exports a single function as default export, not a named export.","wrong":"import { dynamicImport } from 'vite-plugin-dynamic-import'","symbol":"dynamicImport (default import)","correct":"import dynamicImport from 'vite-plugin-dynamic-import'"},{"note":"TypeScript users can import the Options interface for type checking, but it's not necessary at runtime.","wrong":"","symbol":"Options type","correct":"import type { Options } from 'vite-plugin-dynamic-import'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite'\nimport dynamicImport from 'vite-plugin-dynamic-import'\n\nexport default defineConfig({\n  plugins: [\n    dynamicImport({\n      loose: true,\n      filter(id) {\n        // default excludes node_modules; include if needed\n        if (id.includes('/node_modules/some-module')) {\n          return true\n        }\n      },\n      onFiles(files, id) {\n        // exclude certain files like .d.ts\n        return files.filter(f => !f.endsWith('.d.ts'))\n      },\n      onResolve(rawImportee, id) {\n        // prepend @vite-ignore to bypass Vite's dynamic import warning\n        return `\\/*@vite-ignore*\\/ ${rawImportee}`\n      }\n    })\n  ]\n})\n\n// router.js (example usage)\nconst route = await import(`./views/${someVariable}.js`) // now supports aliases and missing extensions","lang":"javascript","description":"Shows how to configure the plugin in vite.config.js to enable dynamic imports with aliases, node_modules inclusion, file filtering, and custom resolution."},"warnings":[{"fix":"Upgrade to Vite 2+","message":"The plugin requires Vite 2.x or newer; Vite 1.x is not supported.","severity":"breaking","affected_versions":"vite-plugin-dynamic-import@>=1.0.0"},{"fix":"Add a filter callback returning true for node_modules paths you want to transform.","message":"By default, the plugin excludes node_modules. You must explicitly set the `filter` option to include bare module imports from node_modules.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use `onFiles` callback instead of previous undefined behavior.","message":"In version 1.5.0, the `onFiles` option was introduced; older versions had a different mechanism for excluding files.","severity":"deprecated","affected_versions":"<1.5.0"},{"fix":"Use `loose: false` for stricter matching similar to @rollup/plugin-dynamic-import-vars.","message":"When using `loose: true`, the plugin may over-match patterns and generate many switch cases, leading to large bundle sizes.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Define aliases in vite.config.js resolve.alias and set resolve.extensions as needed.","message":"The plugin relies on Vite's resolve.alias and resolve.extensions configurations; dynamic imports may not work if these are not properly set.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use import statement (ESM) or switch to an ESM module (e.g., type: \"module\" in package.json).","cause":"Using require() in a CommonJS context; package is ESM-only.","error":"Error: Cannot find module 'vite-plugin-dynamic-import'"},{"fix":"Install and configure vite-plugin-dynamic-import in vite.config.js.","cause":"Alias is not recognized without the plugin; Vite does not resolve aliases in dynamic imports by default.","error":"Dynamic import with alias not resolved: `import('@/views/${variable}')`"},{"fix":"Add a filter option that returns true for the specific module paths.","cause":"The default filter excludes node_modules.","error":"The plugin does not transform dynamic imports inside node_modules"},{"fix":"Ensure that resolve.extensions includes the needed extensions. The plugin helps but may require explicit globbing.","cause":"The dynamic import path does not include the file extension, and Vite cannot guess it.","error":"Module not found: Cannot resolve '...' (dynamic import with missing extension)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}