Closed
Description
I'm using the monaco-editor-webpack-plugin to load monaco within a vscode extension, but I'm running into an error around the webworkers when it loads the json language:
Uncaught ReferenceError: importScripts is not defined
are webworkers just not supported?
this is the code to set the vscode-resource in my extension
getWebviewContent(extensionPath: string) {
const manifest = require(path.join(extensionPath, 'build', 'asset-manifest.json'));
// get all generated chunks names
const chunksRegex = /^((?!\.map|\.css|\.html).)*$/;
const chunkNames = Object.keys(manifest.files).filter(key => chunksRegex.test(key));
// Use a nonce to whitelist which scripts can be run
const nonce = v4();
const scripts = [...chunkNames]
.map((scriptName) => {
const scriptUri = vscode.Uri
.file(path.join(extensionPath, 'build', manifest.files[scriptName]))
.with({ scheme: 'vscode-resource' });
return `<script nonce="${nonce}" src="${scriptUri}"></script>`;
})
.join('');
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React App</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}';style-src vscode-resource: 'unsafe-inline' http: https: data:;">
<base href="${vscode.Uri.file(path.join(extensionPath, 'build')).with({ scheme: 'vscode-resource' })}/">
<style>
body {
background: white;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
${scripts}
</body>
</html>`;
}
and how it gets used:
ReactWebView.currentPanel.webview.html = this.getWebviewContent(context.extensionPath);