monaco-editor-webpack-plugin

7.1.1 verified Sat Apr 25 auth: no javascript

A webpack plugin that simplifies bundling Monaco Editor with webpack by automatically handling worker scripts and language/feature loading. Currently at version 7.1.1, it supports webpack 4.5+ and 5.x, with peer dependencies on monaco-editor >=0.31.0. Key differentiator: eliminates manual configuration for Monaco's web workers, CSS, and fonts, while offering granular control over included languages and features to reduce bundle size. Ships TypeScript types and requires additional loaders (style-loader, css-loader) for CSS and file-loader for fonts.

Common errors

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause Missing CSS loader for Monaco Editor styles.

fix

Add rule: { test: /\.css$/, use: ['style-loader', 'css-loader'] }

error Cannot find module 'monaco-editor-webpack-plugin' ↓

cause Package not installed or misconfigured in webpack config.

fix

Run npm install monaco-editor-webpack-plugin --save-dev and ensure correct import.

error ERROR in ./node_modules/monaco-editor/esm/vs/editor/editor.api.js Module not found: Error: Can't resolve 'fs' in '...' ↓

cause Webpack bundle target is browser but plugin expects node environment for workers.

fix

Set target: 'web' in webpack config and ensure workers are handled.

Warnings

breaking Requires webpack >=4.5.0 or 5.x; webpack 3 and below unsupported. ↓

fix Upgrade webpack to 4.5+ or 5.x.

breaking In Webpack 4 or lower, must use file-loader for .ttf files; asset/resource requires Webpack 5. ↓

fix Add file-loader rule: { test: /\.ttf$/, use: ['file-loader'] }

deprecated globalAPI option is deprecated since monaco-editor 0.22.0; use MonacoEnvironment instead. ↓

fix Set globalThis.MonacoEnvironment = { globalAPI: true } before importing monaco-editor.

gotcha Language dependencies: javascript requires typescript, handlebars requires html, scss/less require css. ↓

fix Include the instantiator language in the languages array.

Install

npm install monaco-editor-webpack-plugin

yarn add monaco-editor-webpack-plugin

pnpm add monaco-editor-webpack-plugin

Imports

MonacoWebpackPlugin

wrong

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

correct

import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin'

ESM default export; CommonJS require also works but types are ESM-first

monaco
wrong
```
import monaco from 'monaco-editor'
```
correct
```
import * as monaco from 'monaco-editor'
```
monaco-editor is ESM-only; default import is not available, use namespace import
monaco (lightweight)
```
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
```
Only imports the core editor API without languages/features; reduces bundle size

Quickstart

Configures webpack with MonacoWebpackPlugin, loads Monaco Editor, and creates an editor instance.

// webpack.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.ttf$/, type: 'asset/resource' }
    ]
  },
  plugins: [new MonacoWebpackPlugin()]
};

// index.js
import * as monaco from 'monaco-editor';

monaco.editor.create(document.getElementById('container'), {
  value: 'console.log("Hello, world")',
  language: 'javascript'
});