vite-plugin-monaco-editor

1.1.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error SyntaxError: The requested module 'vite-plugin-monaco-editor' does not provide an export named 'default' ↓

cause Using CommonJS require() instead of ESM import.

fix

Change to: import monacoEditorPlugin from 'vite-plugin-monaco-editor'

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. ↓

cause Missing peer dependency monaco-editor or plugin not added to vite config.

fix

Run: npm install monaco-editor; then add the plugin to vite.config.ts.

error TypeError: Cannot read properties of undefined (reading 'create') ↓

cause Importing monaco-editor incorrectly (e.g., default import yields undefined).

fix

Use: import * as monaco from 'monaco-editor'

Warnings

breaking Plugin is ESM-only; using require() will throw an error. ↓

fix Ensure your vite config is in .mjs or TypeScript, or use dynamic import().

gotcha The plugin does not automatically import monaco-editor; you must install and import it separately. ↓

fix Install monaco-editor as a regular dependency (not devDependency) and import it in your code.

gotcha If you use globalAPI: true, you must set MonacoEnvironment.globalAPI before importing monaco-editor. ↓

fix In your entry file, add: (self as any).MonacoEnvironment = { globalAPI: true }; then import * as monaco from 'monaco-editor';

deprecated The 'publicPath' option default changed from 'monacoeditorwork' to a more unique path in v1.0.0. ↓

fix If you rely on the default publicPath for caching, update your service-worker or CDN config.

Install

npm install vite-plugin-monaco-editor

yarn add vite-plugin-monaco-editor

pnpm add vite-plugin-monaco-editor

Imports

monacoEditorPlugin
wrong
```
const monacoEditorPlugin = require('vite-plugin-monaco-editor')
```
correct
```
import monacoEditorPlugin from 'vite-plugin-monaco-editor'
```
ESM-only – CommonJS require will fail. The default export is a function that returns a plugin instance.
monaco
wrong
```
import monaco from 'monaco-editor'
```
correct
```
import * as monaco from 'monaco-editor'
```
monaco-editor uses named exports; the default export is undefined. Always use namespace import.
monaco (custom import)
wrong
```
import { monaco } from 'monaco-editor/esm/vs/editor/editor.api'
```
correct
```
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
```
For custom bundles, import the API module with namespace. The path is within monaco-editor's ESM build.

Quickstart

Basic setup: add plugin to vite config and create an editor instance with one language.

// vite.config.ts
import { defineConfig } from 'vite';
import monacoEditorPlugin from 'vite-plugin-monaco-editor';

export default defineConfig({
  plugins: [monacoEditorPlugin()]
});

// main.ts
import * as monaco from 'monaco-editor';

monaco.editor.create(document.getElementById('container'), {
  value: 'console.log("Hello, world")',
  language: 'javascript'
});