[Bug] Monaco-editor-webpack-plugin not working correctly with ESM modules

[OperationSavant]

Reproducible in vscode.dev or in VS Code Desktop?

• [x] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• [x] Not reproducible in the monaco editor playground

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

Reproduction Steps

I am trying to a create a VS code extension. I am using webview to load Monaco-editor. versions used:

1. Monaco-Editor: 0.54.0
2. Monaco-Editor-Webpack-Plugin: 7.1.1

Actual (Problematic) Behavior

When I tried initially with version 0.52.2, I was getting issues with importscripts. Although some of the language features weren't working, but basic functionalities like copy/paste/cut with keyboard shortcuts or context menu were working. Anyways to get rid of the errors, I decided to upgrade the version to latest and now the errors are gone but cut/paste functionalities aren't working anymore.

Also the latest version is giving 2 moderate severity vulnerabilities. dompurify <3.2.4 Severity: moderate DOMPurify allows Cross-site Scripting (XSS) - https://github.com/advisories/GHSA-vhxf-7vqr-mrjg fix available via npm audit fix --force Will install [email protected], which is a breaking change node_modules/dompurify monaco-editor 0.54.0-dev-20250909 - 0.55.0-dev-20251016 Depends on vulnerable versions of dompurify node_modules/monaco-editor

2 moderate severity vulnerabilities

To address all issues (including breaking changes), run: npm audit fix --force

Expected Behavior

1. Cut/Paste functionalities should be working
2. There shouldn't be any vulnerabilities

Additional Context

No response

[hediet]

There shouldn't be any vulnerabilities

This is tracked already.

Cut/Paste functionalities should be working

Are you using the monaco editor in electron?

[OperationSavant]

Cut/Paste functionalities should be working

Are you using the monaco editor in electron?

I am creating a vs code extension which uses a webview. Inside the webview I am using the monaco-editor.

[hediet]

I bet this has something to do with EditContext. I think there is an editor option to turn the edit context off, which should fix your issue.

[deepak1556]

Can you share a minimal extension sample that demonstrates the issue.

[OperationSavant]

This is code for creating the editor:

const editor = monaco.editor.create(editorRef.current, {
					value,
					language,
					readOnly,
					automaticLayout: true,
					minimap: { enabled: minimap },
					scrollBeyondLastLine: false,
					renderLineHighlight: 'none',
					lineNumbers: lineNumbers ? 'on' : 'off',
					glyphMargin: false,
					folding: true,
					showFoldingControls: 'mouseover',
					foldingStrategy: 'indentation',
					renderWhitespace: 'none',
					guides: {
						indentation: true,
						highlightActiveIndentation: 'always',
						bracketPairs: 'active',
						bracketPairsHorizontal: 'active',
					},
					wordWrap: wordWrap ? 'on' : 'off',
					scrollbar: {
						verticalScrollbarSize: 8,
						horizontalScrollbarSize: 8,
						useShadows: false,
					},
					overviewRulerLanes: 0,
					hideCursorInOverviewRuler: true,
					overviewRulerBorder: false,
					quickSuggestions: false,
					wordBasedSuggestions: 'off',
					suggestOnTriggerCharacters: false,
					acceptSuggestionOnEnter: 'off',
					tabCompletion: 'off',
					parameterHints: { enabled: false },
					contextmenu: false,
					mouseWheelZoom: true,
					formatOnPaste: true,
					formatOnType: true,
					fontLigatures: true,
					editContext: true
				});

this is code for JSX:

<div
				className={`monaco-editor-container ${className}`}
				style={{ position: 'relative', height }}
				data-testid='monaco-editor-container'
				aria-label={`Monaco code editor for ${language} content`}>
				{copyButtonVisible && (
					<button
						onClick={handleCopy}
						tabIndex={0}
						className='absolute top-2 right-2 z-10 px-3 py-1 bg-background border border-border rounded text-xs hover:bg-accent transition-colors'>
						{copyText}
					</button>
				)}
				<div ref={editorRef} className='monaco-editor-wrapper' style={{ width: '100%', height: '100%' }} />
			</div>

This is the editor ref instance:

const editorRef = useRef<HTMLDivElement>(null);
const onContentChangeRef = useRef(onContentChange);

Please note that this was working till v 0.52.2.