{"id":15808,"library":"rollup-monaco-bundler","title":"Rollup Monaco Bundler","description":"rollup-monaco-bundler is a specialized Rollup utility designed to bundle `monaco-editor` dependencies, particularly focusing on generating UMD-formatted output. Its core differentiator is the provision for dynamic runtime National Language Support (NLS) injection, enabling `monaco-editor` to load language packs at runtime rather than bundling all of them upfront. The package, currently at version 1.0.2, appears to be in maintenance mode with its last notable activity around March 2025. Unlike other Monaco-specific Rollup plugins which might focus solely on bundling, this package explicitly targets the externalization of Monaco dependencies and efficient NLS handling for optimized bundle sizes in web applications. It's best suited for projects that require `monaco-editor` in a UMD context and need fine-grained control over internationalization.","status":"maintenance","version":"1.0.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","monaco-editor","rollup","bundler","nls","locale","typescript"],"install":[{"cmd":"npm install rollup-monaco-bundler","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-monaco-bundler","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-monaco-bundler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core bundler, required as a peer dependency for executing configurations.","package":"rollup","optional":false},{"reason":"The editor library this bundler is designed to process; likely a peer dependency.","package":"monaco-editor","optional":false},{"reason":"Required for processing `rollup.config.ts` and any TypeScript source files.","package":"@rollup/plugin-typescript","optional":true},{"reason":"Essential for resolving modules from `node_modules` during bundling.","package":"@rollup/plugin-node-resolve","optional":true},{"reason":"Needed to convert CommonJS modules (like parts of Monaco or its dependencies) into ES modules for Rollup processing.","package":"@rollup/plugin-commonjs","optional":true}],"imports":[{"note":"Primarily an ESM module. `RollupMonacoBundler` is intended to generate or assist in creating a Rollup configuration.","wrong":"const RollupMonacoBundler = require('rollup-monaco-bundler');","symbol":"RollupMonacoBundler","correct":"import { RollupMonacoBundler } from 'rollup-monaco-bundler';"},{"note":"The `monacoNlsInject` function is a Rollup plugin factory for handling NLS injection.","wrong":"import monacoNlsInject from 'rollup-monaco-bundler/nls';","symbol":"monacoNlsInject","correct":"import { monacoNlsInject } from 'rollup-monaco-bundler';"},{"note":"When writing `rollup.config.ts`, import Rollup's types for better IntelliSense and type checking.","symbol":"Rollup options","correct":"import type { RollupOptions } from 'rollup';"}],"quickstart":{"code":"import { defineConfig } from 'rollup';\nimport { monacoNlsInject } from 'rollup-monaco-bundler';\nimport typescript from '@rollup/plugin-typescript';\nimport { nodeResolve } from '@rollup/plugin-node-resolve';\nimport commonjs from '@rollup/plugin-commonjs';\n\nexport default defineConfig({\n  input: 'src/index.ts',\n  output: {\n    dir: 'dist',\n    format: 'umd',\n    name: 'MonacoEditorBundle',\n    sourcemap: true,\n  },\n  plugins: [\n    nodeResolve(),\n    commonjs(),\n    typescript(),\n    monacoNlsInject({\n      locale: process.env.MONACO_LOCALE || 'en',\n      // Other options like 'basePath', 'ignore' can be configured here.\n      // Refer to the plugin documentation for full options.\n    }),\n    // Other Rollup plugins for CSS, assets, etc. may be needed\n  ],\n  external: [\n    // List any modules that should not be bundled here, e.g., 'monaco-editor'\n    // if you intend to load it separately or from a CDN.\n  ]\n});\n","lang":"typescript","description":"Demonstrates a basic Rollup configuration using `monacoNlsInject` to bundle `monaco-editor` with dynamic NLS, outputting a UMD bundle."},"warnings":[{"fix":"Review `monaco-editor`'s changelog for breaking changes related to its module format. Ensure your Rollup configuration explicitly handles ESM imports if using modern Monaco versions, potentially requiring additional plugins like `@rollup/plugin-commonjs` and `@rollup/plugin-node-resolve` configured correctly, and consider if `rollup-monaco-bundler` still meets your needs for newer Monaco versions.","message":"`monaco-editor` itself has transitioned heavily towards ESM builds, deprecating its AMD build. While `rollup-monaco-bundler` aims for UMD, direct integration with the latest `monaco-editor` versions (0.50.0+ as of early 2026) might require careful configuration or may not be fully compatible with older patterns used by this bundler, potentially leading to build failures or unexpected runtime behavior.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Always include `@rollup/plugin-typescript`, `@rollup/plugin-node-resolve`, and `@rollup/plugin-commonjs` in your Rollup configuration's `plugins` array. Ensure `@rollup/plugin-node-resolve` and `@rollup/plugin-commonjs` are placed before `monacoNlsInject` and any custom source processing plugins. For TypeScript, `plugin-typescript` should typically be early.","message":"To effectively bundle `monaco-editor` and its dependencies, `rollup-monaco-bundler` must be used alongside other essential Rollup plugins such as `@rollup/plugin-typescript` (for `rollup.config.ts` and source files), `@rollup/plugin-node-resolve` for resolving `node_modules` paths, and `@rollup/plugin-commonjs` for handling CommonJS modules. Failing to include or correctly configure these plugins will likely result in build errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Utilize Monaco's own options to include only necessary languages and features. Consider dynamically importing the Monaco editor only when needed. Configure Rollup's `external` option to exclude Monaco if you intend to load it from a CDN or a separate bundle.","message":"The `monaco-editor` can produce very large bundles, impacting load times. This bundler aims to help with NLS, but overall bundle size requires careful configuration of Monaco features, languages, and potentially aggressive tree-shaking or dynamic imports.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Write your `rollup.config.ts` file using ES Module syntax (`import`/`export default`). If you need CommonJS-specific variables, you may need to use `import.meta.url` and `path` utilities to derive them for ESM contexts.","message":"Rollup configuration files (e.g., `rollup.config.js` or `rollup.config.ts`) themselves are typically treated as ES Modules by modern Rollup versions. Mixing CommonJS (`require`) syntax in a TypeScript configuration or expecting global variables like `__dirname` to work without special handling can lead to errors.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `@rollup/plugin-commonjs` is installed and included in your `rollup.config.ts` plugins array, placed *after* `@rollup/plugin-node-resolve` and *before* `@rollup/plugin-typescript` if both are present. You might need to add specific `namedExports` configurations to `@rollup/plugin-commonjs` for problematic modules.","cause":"A module, likely a CommonJS dependency of Monaco, is being imported as an ES Module, but Rollup cannot determine the correct export. Often occurs when `@rollup/plugin-commonjs` is missing or incorrectly placed.","error":"Error: \"[name] is not exported by [module]\""},{"fix":"Ensure your Rollup configuration correctly handles copying or bundling worker scripts to the output directory and that the Monaco editor's global configuration (`monaco.config`) points to the correct `vs` path where these workers are located. This might involve using `rollup-plugin-copy` or similar.","cause":"Monaco editor relies on web workers for language services. If the worker scripts are not correctly bundled, served from the correct path, or if their URLs are misconfigured, they will fail to load, preventing the editor from fully functioning.","error":"Monaco editor worker files are not found or fail to load."},{"fix":"Ensure `monaco-editor` is loaded consistently, either entirely via a bundler (using `rollup-monaco-bundler` and other plugins) or entirely via a CDN. Avoid duplicate or conflicting `monaco.config` calls. Verify that the Monaco loader configuration, if used, is applied correctly before editor initialization.","cause":"This often happens if the global `monaco` object is not correctly initialized or if `monaco-editor` is being loaded multiple times or in an incompatible way (e.g., mixing CDN-loaded Monaco with a bundled version).","error":"TypeError: Cannot read properties of undefined (reading 'config') or similar when loading Monaco."}],"ecosystem":"npm"}