Fix: Monaco 404 errors (#3222)

config/webpack.config.js

@@ -388,6 +388,10 @@ module.exports = function (webpackEnv) {
  'sass-loader'
  )
  },
+ {
+ test: /\.css$/,
+ use: ['style-loader', 'css-loader']
+ },
  {
  test: /\.ttf$/,
  type: 'asset/resource'

src/index.tsx

@@ -160,6 +160,43 @@ function loadResources() {
 }
 loadResources();
 
+/**
+ * Set's up Monaco Editor's Workers.
+ */
+enum Workers {
+ Json = 'json',
+ Editor = 'editor',
+ Typescript='ts',
+ Css='css',
+ Html='html'
+}
+
+window.MonacoEnvironment = {
+ getWorkerUrl(moduleId: any, label: string) {
+ switch (label) {
+ case 'json':
+ return getWorkerFor(Workers.Json);
+ case 'css':
+ return getWorkerFor(Workers.Css);
+ case 'html':
+ return getWorkerFor(Workers.Html);
+ case 'typescript':
+ return getWorkerFor(Workers.Typescript);
+ default:
+ return getWorkerFor(Workers.Editor);
+ }
+ }
+};
+
+function getWorkerFor(worker: string): string {
+ // tslint:disable-next-line:max-line-length
+ const WORKER_PATH =
+ 'https://graphstagingblobstorage.blob.core.windows.net/staging/vendor/bower_components/explorer-v2/build';
+
+ return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
+ importScripts('${WORKER_PATH}/${worker}.worker.js');`)}`;
+}
+
 variantService.initialize();
 const telemetryProvider: ITelemetry = telemetry;
 telemetryProvider.initialize();

src/types/index.d.ts

@@ -1,7 +1,10 @@
+import { Environment } from 'monaco-editor/esm/vs/editor/editor.api';
+
 export {};
 declare global {
  interface Window {
  ClientId: string | undefined
+ MonacoEnvironment: Environment;
  }
 }