Skip to content

HTML Document has an element with vscode as it's id caused bug #2409

Closed

Description

monaco-editor version: 0.23.0
Browser: Chrome 89
OS: Win10 Home
HTML code that reproduces the issue:

<div id="vscode"></div>
<script type="text/javascript" src="http://localhost/static/library/monaco-editor/min/vs/loader.js"></script>
<script>
  require.config({ paths: { 'vs': 'http://localhost/static/library/monaco-editor/min/vs' }});

  // Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
  // the default worker url location (used when creating WebWorkers). The problem here is that
  // HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
  // a web worker through a same-domain script
  window.MonacoEnvironment = {
    getWorkerUrl: function(workerId, label) {
      return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
        self.MonacoEnvironment = {
          baseUrl: 'http://localhost/static/library/monaco-editor/min/'
        };
        importScripts('http://localhost/static/library/monaco-editor/min/vs/base/worker/workerMain.js');`
      )}`;
    }
  };

  require(["vs/editor/editor.main"], function () {
    // ...
  });
</script>

When I upgrade my monaco-editor from 0.18.0 to 0.23.0, an error popped up.

process.ts:23 Uncaught TypeError: Cannot read property 'env' of undefined
    at Object.get env [as env] (process.ts:23)
    at process.ts:46
    at Function.r._invokeFactory (loader.js:1118)
    at r.complete (loader.js:1128)
    at r._onModuleComplete (loader.js:1754)
    at r._resolve (loader.js:1714)
    at r.defineModule (loader.js:1357)
    at _ (loader.js:1804)
    at platform.ts:204
    at fake:1

So I checked the min-map, and here is the code:

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

import { isWindows, isMacintosh, setImmediate, globals, INodeProcess } from 'vs/base/common/platform';

declare const process: INodeProcess;

let safeProcess: INodeProcess;

// Native node.js environment
if (typeof process !== 'undefined') {
	safeProcess = process;
}

// Native sandbox environment
else if (typeof globals.vscode !== 'undefined') {
	safeProcess = {

		// Supported
		get platform(): 'win32' | 'linux' | 'darwin' { return globals.vscode.process.platform; },
		get env() { return globals.vscode.process.env; },
		nextTick(callback: (...args: any[]) => void): void { return setImmediate(callback); },

		// Unsupported
		cwd(): string { return globals.vscode.process.env['VSCODE_CWD'] || globals.vscode.process.execPath.substr(0, globals.vscode.process.execPath.lastIndexOf(globals.vscode.process.platform === 'win32' ? '\\' : '/')); }
	};
}

// Web environment
else {
	safeProcess = {

		// Supported
		get platform(): 'win32' | 'linux' | 'darwin' { return isWindows ? 'win32' : isMacintosh ? 'darwin' : 'linux'; },
		nextTick(callback: (...args: any[]) => void): void { return setImmediate(callback); },

		// Unsupported
		get env() { return Object.create(null); },
		cwd(): string { return '/'; }
	};
}

export const cwd = safeProcess.cwd;
export const env = safeProcess.env;
export const platform = safeProcess.platform;

The exception occurs when it tries to export safeProcess.env but it returns globals.vscode.process.env which doesn't exist. It's a webpage so it should enter the Web Environment scope not the Native sandbox environment scope. then I look down to platform.js but that is beyond my understanding.

const _globals = (typeof self === 'object' ? self : typeof global === 'object' ? global : {} as any);

Then I tried a clean startup and found out the example works fine, so it must have something to do with that page. So I started to delete elements. At last, I found out it is the #vscode element that has the problem. When I rename it or remove it, It works fine, when I add it to HTML structure, it just crashes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

Labels

bugIssue identified by VS Code Team member as probable bug

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions