vite-plugin-monaco-editor-esm

2.0.2 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Failed to fetch dynamically imported module: http://localhost:5173/monacoeditorwork/editorWorkerService.js ↓

cause The plugin's worker public path misconfigured or not being served during development.

fix

Ensure plugin is correctly added to Vite plugins and publicPath matches the development server path (default 'monacoeditorwork').

error Error: No languages registered. Did you forget to import 'monaco-editor/esm/vs/editor/editor.all.js'? ↓

cause Using partial imports but missing the editor.all.js import which registers basic language features.

fix

Add import 'monaco-editor/esm/vs/editor/editor.all.js' before using the editor API.

error Cannot find module 'monaco-editor/esm/vs/editor/editor.api' ↓

cause The path is specific to the ESM build; using CommonJS or old version.

fix

Ensure monaco-editor version >=0.33.0 and use the correct ESM path.

Warnings

gotcha Worker scripts are bundled via esbuild in a proxy server during development, so do not reference them directly. ↓

fix Use the plugin's default handling; do not manually configure worker paths.

deprecated globalAPI option is deprecated since monaco-editor 0.34.0. Use monaco.editor.defineTheme or other APIs instead. ↓

fix Remove globalAPI option; it defaults to false and is no longer needed.

gotcha When using partial imports (e.g., editor.api), you must also import the corresponding worker entry for the language. ↓

fix For each language used, include its worker in languageWorkers (e.g., 'typescript').

gotcha The plugin overrides the default public path; if you change it, ensure it matches your deployment path. ↓

fix Set publicPath to the served path, e.g., '/workers' or a CDN URL.

gotcha If you use CDN with forceBuildCDN: false (default), workers are skipped during build; they must be available at the CDN URL. ↓

fix Set forceBuildCDN: true to bundle workers locally, or ensure CDN URL contains the workers.

Install

npm install vite-plugin-monaco-editor-esm

yarn add vite-plugin-monaco-editor-esm

pnpm add vite-plugin-monaco-editor-esm

Imports

default (plugin)

wrong

import { monacoEditorEsmPlugin } from 'vite-plugin-monaco-editor-esm'

correct

import monacoEditorEsmPlugin from 'vite-plugin-monaco-editor-esm'

This is a default export, not a named export.

monaco (all features)
wrong
```
import monaco from 'monaco-editor'
```
correct
```
import * as monaco from 'monaco-editor'
```
Monaco Editor's ESM entry is a namespace import, not default.

monaco (partial features)

wrong

import monaco from 'monaco-editor/esm/vs/editor/editor.api'

correct

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'

When using partial imports, must also separately import editor.all.js and language features.

IWorkerDefinition (type)

wrong

import { IWorkerDefinition } from 'vite-plugin-monaco-editor-esm'

correct

import type { IWorkerDefinition } from 'vite-plugin-monaco-editor-esm'

Type-only import in TypeScript to avoid runtime inclusion.

Quickstart

Vite config with the plugin, then create a Monaco Editor instance using all features.

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

export default defineConfig({
  plugins: [
    monacoEditorEsmPlugin({
      languageWorkers: ['editorWorkerService', 'typescript', 'json'],
      publicPath: '/workers'
    })
  ]
});

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

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