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

rollup-plugin-monaco-editor

library0.2.1jsnpmunverified

A Rollup plugin for bundling Monaco Editor with support for selective language and feature inclusion. Version 0.2.1 is current; it is compatible with monaco-editor versions 0.21.x to 0.31.x and Rollup 2.x. The plugin helps reduce bundle size by allowing users to specify only needed languages and editor features. It automatically generates a workers directory and handles CSS injection. Works best alongside @rollup/plugin-node-resolve, @rollup/plugin-commonjs, and a CSS plugin like rollup-plugin-postcss.

web-framework

npm install rollup-plugin-monaco-editor

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-MONA

rollup-plugin-monaco-editor

web-frameworkjavascriptv0.2.1

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

✓ import monaco from 'rollup-plugin-monaco-editor'

✗ const monaco = require('rollup-plugin-monaco-editor')

ESM module; default export is the plugin function.

MonacoEditorPluginOptions

✓ import type { MonacoEditorPluginOptions } from 'rollup-plugin-monaco-editor'

TypeScript type for plugin options; use import type for isolated declarations.

monaco (in CommonJS)

✓ const { default: monaco } = require('rollup-plugin-monaco-editor')

✗ const monaco = require('rollup-plugin-monaco-editor')

CommonJS users must use .default; the package exports ESM only but can be required with this pattern.

Minimal Rollup config using rollup-plugin-monaco-editor with selective language inclusion and necessary companion plugins.

// rollup.config.js import { nodeResolve } from '@rollup/plugin-node-resolve'; import postcss from 'rollup-plugin-postcss'; import commonjs from '@rollup/plugin-commonjs'; import monaco from 'rollup-plugin-monaco-editor'; export default { input: 'src/index.js', output: { format: 'es', dir: 'dist', }, plugins: [ postcss(), monaco({ languages: ['json'], // features: ['contextmenu'] }), nodeResolve(), commonjs(), ], };

Debug

Known issues

gotchaPlugin must be placed before nodeResolve and commonjs in the plugins array.

fix

Order plugins as: monaco(), then nodeResolve(), then commonjs().

affects: >=0.2.0

gotchaIf output.format is 'es' or 'esm' and esm option is not set, defaults to true; otherwise false.

fix

Set esm: true/false explicitly if output format is not clear.

affects: >=0.2.0

gotchaWorkers are output to a 'workers' directory inside the output directory; make sure your server serves it.

fix

Ensure the 'workers' subdirectory is copied to deployment or served statically.

affects: >=0.2.0

deprecatedmonaco-editor versions below 0.21.2 are not supported.

fix

Upgrade monaco-editor to at least 0.21.2.

affects: >=0.2.0

Errors

Common errors & fixes

Error: The 'monaco-editor' package must be installed as a dependency.

Missing peer dependency monaco-editor.

fix

npm install monaco-editor

Error: 'must be called before nodeResolve and commonjs'

Incorrect plugin order: monaco() placed after nodeResolve or commonjs.

fix

Reorder plugins so monaco() comes first.

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

Output 'dir' not set or missing in rollup config.

fix

Define output.dir in your rollup configuration.

Upgrade

Version history

0.2.1latest on npm

Audit

Dependencies

monaco-editorrequiredpeer dependency; the editor runtime to bundle

rolluprequiredpeer dependency; requires Rollup 2.x or higher

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/chengcyber/rollup-plugin-monaco-editor ↗

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