{"id":21459,"library":"importmap-vite-plugin","title":"importmap-vite-plugin","description":"A Vite plugin (v0.1.0) that generates an import map JSON virtual module, enabling sharing of dependencies without duplication. It allows mapping local modules (e.g., React) to custom re-export files to support named imports from CJS packages, and external URLs (e.g., from esm.sh) to avoid bundling. Unlike Module Federation or @originjs/vite-plugin-federation, this plugin focuses solely on import maps with fine-grained control over local and remote mappings. Actively maintained on GitHub, with TypeScript definitions provided. Peer dependency on Vite (*).","status":"active","version":"0.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/remorses/importmap-vite-plugin","tags":["javascript","vite","vite-plugin","importmap","import-map","esm","modules","dependencies","module-federation","typescript"],"install":[{"cmd":"npm install importmap-vite-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add importmap-vite-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add importmap-vite-plugin","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM-only; package has no CommonJS export","wrong":"const importMapPlugin = require('importmap-vite-plugin')","symbol":"importMapPlugin","correct":"import { importMapPlugin } from 'importmap-vite-plugin'"},{"note":"Default export only; no named export. TypeScript types are provided.","wrong":"import { importMap } from 'virtual:importmap'","symbol":"importMap (virtual module)","correct":"import importMap from 'virtual:importmap'"},{"note":"The 'imports' option is an object, not an array of tuples","wrong":"importMapPlugin({ imports: [ 'react', './src/import-map/react' ] })","symbol":"Plugin options (inline)","correct":"importMapPlugin({ imports: { 'react': './src/import-map/react' } })"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport { importMapPlugin } from 'importmap-vite-plugin';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    importMapPlugin({\n      imports: {\n        'react': './src/import-map/react',\n        'react-dom': './src/import-map/react-dom',\n        'react/jsx-runtime': './src/import-map/react/jsx-runtime',\n      },\n    }),\n  ],\n});\n\n// src/import-map/react.js\nexport { useState, useEffect } from 'react';\nexport default from 'react';\n\n// src/index.jsx\nimport React from 'react';\nimport importMap from 'virtual:importmap';\n\nconst script = document.createElement('script');\nscript.type = 'importmap';\nscript.textContent = JSON.stringify(importMap);\ndocument.head.appendChild(script);\n\nReactDOM.createRoot(document.getElementById('root')).render(<App />);","lang":"javascript","description":"Configures the Vite plugin with custom local mappings, creates re-export modules for CJS packages, and mounts the generated import map in the HTML."},"warnings":[{"fix":"Create a wrapper module (e.g., 'src/import-map/react.js') that imports the CJS default and re-exports named members","message":"Named imports from CommonJS packages (like React) will fail without a local re-export file that destructures the default export","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use es-module-shims or another import map polyfill for older browsers","message":"Import maps are not supported in older browsers (e.g., Safari <16.4, Chrome <89). Ensure your target browsers support import maps or use a polyfill.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"In production builds, the plugin still works; just ensure your deployment serves the import map JSON correctly (injected via script tag)","message":"The virtual module 'virtual:importmap' is only available during development; in production, you must ensure the import map is generated and served","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Test external URLs manually; ensure they export the symbols you need and are CORS-compatible","message":"When mapping to external URLs (e.g., esm.sh), the plugin does NOT validate the URLs or their compatibility","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Create a wrapper file like 'src/import-map/react.js' that re-exports named members from the CJS default export","cause":"Using named imports from a CJS module without a re-export wrapper","error":"Uncaught SyntaxError: The requested module 'react' does not provide an export named 'useState'"},{"fix":"Add a type declaration file: declare module 'virtual:importmap' { const map: { imports: Record<string, string> }; export default map; }","cause":"TypeScript doesn't recognize the virtual module","error":"Cannot find module 'virtual:importmap' or its corresponding type declarations"},{"fix":"Change imports from an array to an object with module names as keys","cause":"Passed an array instead of an object to the imports option","error":"Error: The plugin option 'imports' should be a plain object"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}