Registry / web-framework / vite-plugin-monaco-editor-esm

vite-plugin-monaco-editor-esm

library2.0.2jsnpmunverified

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.

web-framework http-networking

npm install vite-plugin-monaco-editor-esm

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-MONACO

vite-plugin-monaco-editor-esm

web-frameworkjavascriptv2.0.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default (plugin)

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

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

This is a default export, not a named export.

monaco (all features)

✓ import * as monaco from 'monaco-editor'

✗ import monaco from 'monaco-editor'

Monaco Editor's ESM entry is a namespace import, not default.

monaco (partial features)

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

✗ import 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)

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

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

Type-only import in TypeScript to avoid runtime inclusion.

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' });

Debug

Known issues

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

affects: >=2.0.0

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

affects: >=0.34.0

gotchaWhen 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').

affects: >=2.0.0

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

affects: >=2.0.0

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

affects: >=2.0.0

Errors

Common errors & fixes

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

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: No languages registered. Did you forget to import 'monaco-editor/esm/vs/editor/editor.all.js'?

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.

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

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.

Upgrade

Version history

2.0.2latest on npm

Audit

Dependencies

monaco-editorrequiredpeer dependency required at runtime

Agent activity

23 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/tanghaojie/vite-plugin-monaco-editor-esm ↗

packagehttps://www.npmjs.com/package/vite-plugin-monaco-editor-esm ↗