{"id":22746,"library":"vite-plugin-monaco-editor-esm","title":"vite-plugin-monaco-editor-esm","description":"Vite plugin to simplify loading the Monaco Editor with full ESM support. Current stable version is 2.0.2, with regular updates. It uses Vite's plugin hooks (configResolved, configureServer, transformIndexHtml) and esbuild to bundle workers in a proxy server, avoiding manual worker configuration. Key differentiators: native ESM loading, no global API dependency, support for custom workers and partial imports, and CDN-friendly publicPath option. Peer dependency on monaco-editor >=0.33.0. Ships TypeScript types.","status":"active","version":"2.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/tanghaojie/vite-plugin-monaco-editor-esm","tags":["javascript","vite-plugin","monaco","editor","monaco editor","typescript"],"install":[{"cmd":"npm install vite-plugin-monaco-editor-esm","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-monaco-editor-esm","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-monaco-editor-esm","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required at runtime","package":"monaco-editor","optional":false}],"imports":[{"note":"This is a default export, not a named export.","wrong":"import { monacoEditorEsmPlugin } from 'vite-plugin-monaco-editor-esm'","symbol":"default (plugin)","correct":"import monacoEditorEsmPlugin from 'vite-plugin-monaco-editor-esm'"},{"note":"Monaco Editor's ESM entry is a namespace import, not default.","wrong":"import monaco from 'monaco-editor'","symbol":"monaco (all features)","correct":"import * as monaco from 'monaco-editor'"},{"note":"When using partial imports, must also separately import editor.all.js and language features.","wrong":"import monaco from 'monaco-editor/esm/vs/editor/editor.api'","symbol":"monaco (partial features)","correct":"import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'"},{"note":"Type-only import in TypeScript to avoid runtime inclusion.","wrong":"import { IWorkerDefinition } from 'vite-plugin-monaco-editor-esm'","symbol":"IWorkerDefinition (type)","correct":"import type { IWorkerDefinition } from 'vite-plugin-monaco-editor-esm'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport monacoEditorEsmPlugin from 'vite-plugin-monaco-editor-esm';\n\nexport default defineConfig({\n  plugins: [\n    monacoEditorEsmPlugin({\n      languageWorkers: ['editorWorkerService', 'typescript', 'json'],\n      publicPath: '/workers'\n    })\n  ]\n});\n\n// main.ts\nimport * as monaco from 'monaco-editor';\n\nmonaco.editor.create(document.getElementById('container'), {\n  value: 'console.log(\"Hello World\");',\n  language: 'javascript'\n});","lang":"typescript","description":"Vite config with the plugin, then create a Monaco Editor instance using all features."},"warnings":[{"fix":"Use the plugin's default handling; do not manually configure worker paths.","message":"Worker scripts are bundled via esbuild in a proxy server during development, so do not reference them directly.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Remove globalAPI option; it defaults to false and is no longer needed.","message":"globalAPI option is deprecated since monaco-editor 0.34.0. Use monaco.editor.defineTheme or other APIs instead.","severity":"deprecated","affected_versions":">=0.34.0"},{"fix":"For each language used, include its worker in languageWorkers (e.g., 'typescript').","message":"When using partial imports (e.g., editor.api), you must also import the corresponding worker entry for the language.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Set publicPath to the served path, e.g., '/workers' or a CDN URL.","message":"The plugin overrides the default public path; if you change it, ensure it matches your deployment path.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Set forceBuildCDN: true to bundle workers locally, or ensure CDN URL contains the workers.","message":"If you use CDN with forceBuildCDN: false (default), workers are skipped during build; they must be available at the CDN URL.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Ensure plugin is correctly added to Vite plugins and publicPath matches the development server path (default 'monacoeditorwork').","cause":"The plugin's worker public path misconfigured or not being served during development.","error":"Failed to fetch dynamically imported module: http://localhost:5173/monacoeditorwork/editorWorkerService.js"},{"fix":"Add import 'monaco-editor/esm/vs/editor/editor.all.js' before using the editor API.","cause":"Using partial imports but missing the editor.all.js import which registers basic language features.","error":"Error: No languages registered. Did you forget to import 'monaco-editor/esm/vs/editor/editor.all.js'?"},{"fix":"Ensure monaco-editor version >=0.33.0 and use the correct ESM path.","cause":"The path is specific to the ESM build; using CommonJS or old version.","error":"Cannot find module 'monaco-editor/esm/vs/editor/editor.api'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}