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.