esbuild-monaco-editor-plugin

0.1.1 verified Fri May 01 auth: no javascript

esbuild plugin for integrating Monaco Editor (v0.1.1). It configures esbuild to handle Monaco's web workers and language assets. The plugin is incomplete; imports from 'editor.api.js' require manual language imports, while 'editor.main.js' loads all languages. Alternative to webpack-based Monaco plugins. Low release cadence.

Common errors

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

cause Plugin does not resolve Monaco editor source files correctly.

fix

Ensure monaco-editor is installed and import from 'monaco-editor/esm/vs/editor/editor.main.js'.

error Error: The plugin 'esbuild-monaco-editor-plugin' is not a function ↓

cause Importing with named import instead of default.

fix

Use default import: const monacoEditorPlugin = require('esbuild-monaco-editor-plugin');

Warnings

gotcha Plugin does not handle language workers automatically when importing from 'editor.api.js' ↓

fix Import from 'editor.main.js' instead, or manually load language features.

deprecated Misspelled '--wtach' in example code ↓

fix Use correct flag '--watch'.

gotcha Plugin may not work with newer esbuild versions due to internal changes. ↓

fix Check compatibility; consider alternatives like 'monaco-editor-esbuild'.

gotcha Typo in example: 'ebuild.build' instead of 'esbuild.build'. ↓

fix Correct to 'esbuild.build()'.

Install

npm install esbuild-monaco-editor-plugin

yarn add esbuild-monaco-editor-plugin

pnpm add esbuild-monaco-editor-plugin

Imports

default

wrong

import monacoEditorPlugin from 'esbuild-monaco-editor-plugin';

correct

const monacoEditorPlugin = require('esbuild-monaco-editor-plugin');

Package is CommonJS-only; ESM import may fail.

monacoEditorPlugin

wrong

import { monacoEditorPlugin } from 'esbuild-monaco-editor-plugin';

correct

import monacoEditorPlugin from 'esbuild-monaco-editor-plugin'; // If using bundler with CJS interop

It's a default export, not named.

Quickstart

Shows how to use the plugin in an esbuild build script.

const esbuild = require('esbuild');
const monacoEditorPlugin = require('esbuild-monaco-editor-plugin');

esbuild.build({
  entryPoints: ['src/app.js'],
  bundle: true,
  outdir: 'dist',
  plugins: [monacoEditorPlugin],
}).catch(() => process.exit(1));