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

vite-plugin-monaco-editor

library1.1.0jsnpmunverified

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.

web-framework

npm install vite-plugin-monaco-editor

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-MONACO

vite-plugin-monaco-editor

web-frameworkjavascriptv1.1.0

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–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

monacoEditorPlugin

✓ import monacoEditorPlugin from 'vite-plugin-monaco-editor'

✗ const monacoEditorPlugin = require('vite-plugin-monaco-editor')

ESM-only – CommonJS require will fail. The default export is a function that returns a plugin instance.

monaco

✓ import * as monaco from 'monaco-editor'

✗ import monaco from 'monaco-editor'

monaco-editor uses named exports; the default export is undefined. Always use namespace import.

monaco (custom import)

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

✗ import { 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.

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

Debug

Known issues

breakingPlugin is ESM-only; using require() will throw an error.

fix

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

affects: >=1.0.0

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

affects: >=0.0.1

gotchaIf 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';

affects: >=1.0.0

deprecatedThe '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.

affects: >=1.0.0

Errors

Common errors & fixes

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

Using CommonJS require() instead of ESM import.

fix

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

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.

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.

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

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

fix

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

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

monaco-editorrequiredpeer dependency – the plugin loads and bundles Monaco Editor workers

Agent activity

24 hits · last 30 days

node

OpenAI (training)

Resources

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

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