rollup-plugin-monaco-editor

0.2.1 verified Mon Apr 27 auth: no javascript

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.

Common errors

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

cause Missing peer dependency monaco-editor.

fix

npm install monaco-editor

error Error: 'must be called before nodeResolve and commonjs' ↓

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

fix

Reorder plugins so monaco() comes first.

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

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

fix

Define output.dir in your rollup configuration.

Warnings

gotcha Plugin must be placed before nodeResolve and commonjs in the plugins array. ↓

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

gotcha If 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.

gotcha Workers 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.

deprecated monaco-editor versions below 0.21.2 are not supported. ↓

fix Upgrade monaco-editor to at least 0.21.2.

Install

npm install rollup-plugin-monaco-editor

yarn add rollup-plugin-monaco-editor

pnpm add rollup-plugin-monaco-editor

Imports

default

wrong

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

correct

import monaco from '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)
wrong
```
const monaco = require('rollup-plugin-monaco-editor')
```
correct
```
const { default: monaco } = require('rollup-plugin-monaco-editor')
```
CommonJS users must use .default; the package exports ESM only but can be required with this pattern.

Quickstart

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(),
  ],
};