{"id":25279,"library":"esbuild-dynamic-import-plugin","title":"esbuild-dynamic-import-plugin","description":"An esbuild plugin that transforms named imports from a library (e.g., antd, lodash) into modular 'import on demand' requires, converting import { Button } from 'antd' to require('antd/lib/button/index'). Supports style injection (CSS/LESS files), custom library directory, camel-to-dash conversion, and custom name functions. Version 0.0.12, no regular release cadence. Key differentiator: brings babel-plugin-import-like functionality to esbuild, enabling tree-shaking of large component libraries. Peer dependency on lodash.","status":"active","version":"0.0.12","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/thx/gogocode","tags":["javascript","esbuild","import plugin","esbuild-import-plugin","babel-import-plugin","dynamic import","import","import on demand"],"install":[{"cmd":"npm install esbuild-dynamic-import-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-dynamic-import-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-dynamic-import-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; used internally for utility functions like camelCase conversion","package":"lodash","optional":false}],"imports":[{"note":"The plugin exports a single function via CommonJS; ESM import is not supported as it uses module.exports.","wrong":"import importPlugin from 'esbuild-dynamic-import-plugin'","symbol":"importPlugin","correct":"const importPlugin = require('esbuild-dynamic-import-plugin')"},{"note":"The module exports a default function, not a named export. Use default import in ESM or require in CJS.","wrong":"import { importPlugin } from 'esbuild-dynamic-import-plugin'","symbol":"default","correct":"import importPlugin from 'esbuild-dynamic-import-plugin'"},{"note":"CommonJS require is the standard pattern; ensure esbuild config uses a .js or .cjs file.","wrong":"","symbol":"require style","correct":"const importPlugin = require('esbuild-dynamic-import-plugin')"}],"quickstart":{"code":"const esbuild = require('esbuild');\nconst importPlugin = require('esbuild-dynamic-import-plugin');\nesbuild.build({\n  entryPoints: ['app.js'],\n  bundle: true,\n  outfile: 'out.js',\n  plugins: [\n    importPlugin({\n      options: [\n        {\n          libraryName: 'antd',\n          libraryDirectory: 'lib',\n          style: true\n        }\n      ]\n    })\n  ]\n}).catch(() => process.exit(1));","lang":"javascript","description":"Demonstrates esbuild configuration with the plugin to transform antd imports on demand, including style injection."},"warnings":[{"fix":"Pin library versions (e.g., antd@4.x) and test after upgrades. Use semver ranges cautiously.","message":"The plugin modifies import paths to point to library internals (e.g., antd/lib/button/index). This relies on the library's internal structure and may break with library updates if they change their build output.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Ensure your esbuild configuration includes a CSS plugin (e.g., 'esbuild-sass-plugin' for Sass) or compile styles separately.","message":"Style injection with style: true imports raw LESS/Sass source files. This requires a CSS loader/plugin in esbuild (e.g., esbuild-sass-plugin) or a separate build step to process those files.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"If you encounter issues with __toModule, consider using the plugin's customName function to adjust imports, or test compatibility with your esbuild version.","message":"The plugin uses __toModule wrapper which may not align with esbuild's default module handling in newer versions. Test with esbuild 0.14+.","severity":"deprecated","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Set the 'libraryDirectory' option to match the library's actual subdirectory (e.g., 'es' for antd ES modules).","cause":"The plugin transforms 'antd' imports to paths like 'antd/lib/button/index', but the actual file may differ (e.g., 'antd/es/button/index').","error":"Error: Cannot find module 'antd/lib/button/index'"},{"fix":"Use 'const importPlugin = require(\"esbuild-dynamic-import-plugin\")' or 'import importPlugin from \"esbuild-dynamic-import-plugin\"'.","cause":"Using a named import (import { importPlugin } from ...) instead of default import.","error":"TypeError: importPlugin is not a function"},{"fix":"Set 'libraryDirectory' to 'es' or configure 'styleLibraryDirectory' to match the actual path.","cause":"The style option 'css' is set, but the library uses a different path (e.g., 'antd/es/button/style/css').","error":"Module not found: Can't resolve 'antd/lib/button/style/css'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}