{"id":20674,"library":"vite-plugin-monaco-editor","title":"vite-plugin-monaco-editor","description":"A Vite plugin that simplifies loading the Monaco Editor by automatically bundling workers and injecting them via Vite's dev server and build pipeline. Version 1.1.0 is the latest stable release, with active maintenance (frequent patch releases). Unlike webpack-based alternatives, it leverages Vite-specific hooks and esbuild for worker bundling, supports custom language workers, CDN public path overrides, and selective worker inclusion. Ships TypeScript types. Requires monaco-editor >=0.33.0 as a peer dependency.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/vdesjs/vite-plugin-monaco-editor","tags":["javascript","vite-plugin","monaco","editor","typescript"],"install":[{"cmd":"npm install vite-plugin-monaco-editor","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-monaco-editor","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-monaco-editor","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency – the plugin loads and bundles Monaco Editor workers","package":"monaco-editor","optional":false}],"imports":[{"note":"ESM-only – CommonJS require will fail. The default export is a function that returns a plugin instance.","wrong":"const monacoEditorPlugin = require('vite-plugin-monaco-editor')","symbol":"monacoEditorPlugin","correct":"import monacoEditorPlugin from 'vite-plugin-monaco-editor'"},{"note":"monaco-editor uses named exports; the default export is undefined. Always use namespace import.","wrong":"import monaco from 'monaco-editor'","symbol":"monaco","correct":"import * as monaco from 'monaco-editor'"},{"note":"For custom bundles, import the API module with namespace. The path is within monaco-editor's ESM build.","wrong":"import { monaco } from 'monaco-editor/esm/vs/editor/editor.api'","symbol":"monaco (custom import)","correct":"import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport monacoEditorPlugin from 'vite-plugin-monaco-editor';\n\nexport default defineConfig({\n  plugins: [monacoEditorPlugin()]\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":"Basic setup: add plugin to vite config and create an editor instance with one language."},"warnings":[{"fix":"Ensure your vite config is in .mjs or TypeScript, or use dynamic import().","message":"Plugin is ESM-only; using require() will throw an error.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Install monaco-editor as a regular dependency (not devDependency) and import it in your code.","message":"The plugin does not automatically import monaco-editor; you must install and import it separately.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"In your entry file, add: (self as any).MonacoEnvironment = { globalAPI: true }; then import * as monaco from 'monaco-editor';","message":"If you use globalAPI: true, you must set MonacoEnvironment.globalAPI before importing monaco-editor.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If you rely on the default publicPath for caching, update your service-worker or CDN config.","message":"The 'publicPath' option default changed from 'monacoeditorwork' to a more unique path in v1.0.0.","severity":"deprecated","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":"Change to: import monacoEditorPlugin from 'vite-plugin-monaco-editor'","cause":"Using CommonJS require() instead of ESM import.","error":"SyntaxError: The requested module 'vite-plugin-monaco-editor' does not provide an export named 'default'"},{"fix":"Run: npm install monaco-editor; then add the plugin to vite.config.ts.","cause":"Missing peer dependency monaco-editor or plugin not added to vite config.","error":"Error: MONACO_PATH is not defined. Make sure you have the monaco-editor installed (npm install monaco-editor) and that vite-plugin-monaco-editor is included as a plugin."},{"fix":"Use: import * as monaco from 'monaco-editor'","cause":"Importing monaco-editor incorrectly (e.g., default import yields undefined).","error":"TypeError: Cannot read properties of undefined (reading 'create')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}