{"id":20222,"library":"monaco-editor-webpack-plugin","title":"monaco-editor-webpack-plugin","description":"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.","status":"active","version":"7.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/microsoft/monaco-editor","tags":["javascript","webpack","monaco","editor","loader","typescript"],"install":[{"cmd":"npm install monaco-editor-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add monaco-editor-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add monaco-editor-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin integrates with webpack compilation","package":"webpack","optional":false},{"reason":"Peer dependency; the editor runtime to bundle","package":"monaco-editor","optional":false}],"imports":[{"note":"ESM default export; CommonJS require also works but types are ESM-first","wrong":"const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')","symbol":"MonacoWebpackPlugin","correct":"import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin'"},{"note":"monaco-editor is ESM-only; default import is not available, use namespace import","wrong":"import monaco from 'monaco-editor'","symbol":"monaco","correct":"import * as monaco from 'monaco-editor'"},{"note":"Only imports the core editor API without languages/features; reduces bundle size","symbol":"monaco (lightweight)","correct":"import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'"}],"quickstart":{"code":"// webpack.config.js\nconst MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');\nconst path = require('path');\n\nmodule.exports = {\n  entry: './index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'app.js'\n  },\n  module: {\n    rules: [\n      { test: /\\.css$/, use: ['style-loader', 'css-loader'] },\n      { test: /\\.ttf$/, type: 'asset/resource' }\n    ]\n  },\n  plugins: [new MonacoWebpackPlugin()]\n};\n\n// index.js\nimport * as monaco from 'monaco-editor';\n\nmonaco.editor.create(document.getElementById('container'), {\n  value: 'console.log(\"Hello, world\")',\n  language: 'javascript'\n});","lang":"javascript","description":"Configures webpack with MonacoWebpackPlugin, loads Monaco Editor, and creates an editor instance."},"warnings":[{"fix":"Upgrade webpack to 4.5+ or 5.x.","message":"Requires webpack >=4.5.0 or 5.x; webpack 3 and below unsupported.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Add file-loader rule: { test: /\\.ttf$/, use: ['file-loader'] }","message":"In Webpack 4 or lower, must use file-loader for .ttf files; asset/resource requires Webpack 5.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Set globalThis.MonacoEnvironment = { globalAPI: true } before importing monaco-editor.","message":"globalAPI option is deprecated since monaco-editor 0.22.0; use MonacoEnvironment instead.","severity":"deprecated","affected_versions":">=0.22.0"},{"fix":"Include the instantiator language in the languages array.","message":"Language dependencies: javascript requires typescript, handlebars requires html, scss/less require css.","severity":"gotcha","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add rule: { test: /\\.css$/, use: ['style-loader', 'css-loader'] }","cause":"Missing CSS loader for Monaco Editor styles.","error":"Module parse failed: Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type."},{"fix":"Run npm install monaco-editor-webpack-plugin --save-dev and ensure correct import.","cause":"Package not installed or misconfigured in webpack config.","error":"Cannot find module 'monaco-editor-webpack-plugin'"},{"fix":"Set target: 'web' in webpack config and ensure workers are handled.","cause":"Webpack bundle target is browser but plugin expects node environment for workers.","error":"ERROR in ./node_modules/monaco-editor/esm/vs/editor/editor.api.js\nModule not found: Error: Can't resolve 'fs' in '...'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}