Monaco-editor: "Error: Unexpected usage" and "The operation is insecure." appears only in Safari (and iOS Safari) because of worker script, when assets are located on different origin

[nikolayemrikh]

monaco-editor version: 0.20.0
Browser: Safari and iOS Safari only
OS: MacOS, iOS
Playground code that reproduces the issue: https://github.com/nikolayemrikh/monaco-editor-samples

I ran into the problem with cross-origin loading worker scripts through setting __webpack_public_path__ to different origin.
It causes following errors only in Safari (13.1) and iOS Safari.
That issue doesn't affect other browsers and operating systems.

Errors log in Safari (scripts build without minification to show actual function names):

[Warning] Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes. Please see https://github.com/Microsoft/monaco-editor#faq (logOnceWebWorkerWarning — simpleWorker.js:31)

The operation is insecure. (logOnceWebWorkerWarning — simpleWorker.js:33)

Error: Unexpected usage (languageFeatures.js:74)

I forked samples repo to https://github.com/nikolayemrikh/monaco-editor-samples and modified sample browser-esm-webpack-monaco-plugin in it — https://github.com/nikolayemrikh/monaco-editor-samples/commit/5a3a9bc64863426e4828c2a3aaf677c1e88e8906. I also added npm script to serve assets on different port and set __webpack_public_path__ to that assets origin on top of the entry file (created new file and imported on top of index.js)

Steps to reproduce:

1. clone repo: git clone https://github.com/nikolayemrikh/monaco-editor-samples
2. install deps and build sample: cd monaco-editor-samples && npm i && cd browser-esm-webpack-monaco-plugin && npm run build && cd ../.
3. run modified sample: npm run serve-bug-sample. This will run two servers, one for page and other for assets.
4. go to http://localhost:8888/browser-esm-webpack-monaco-plugin/dist/ in Safari. You will see the following:

Our sentry collected issues and stats shows that only affected browser is safari, and OS is MacOS and iOS. It affected 29 users and 1.7k events were sent.

I've also tried different approach by copying worker scripts manually and setting paths to it in entry script, but that produced the exact same result:

entry: {
    main: './src/main.tsx',
    'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
    'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
    'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
    'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
    'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker',
  },

(content of file, that is imported on top of entry file)

window.MonacoEnvironment = {
    getWorkerUrl: function (moduleId: string, label: string) {
      if (label === 'json') {
        return assetsPath + 'json.worker.min.js';
      }
      if (label === 'css' || label === 'less' || label === 'scss') {
        return assetsPath + 'css.worker.min.js';
      }
      if (label === 'html') {
        return assetsPath + 'html.worker.min.js';
      }
      if (label === 'typescript' || label === 'javascript') {
        return assetsPath + 'ts.worker.min.js';
      }
      return assetsPath + 'editor.worker.min.js';
    },
  };

but that produced the exact same result.

[alexdima]

Published [email protected] which contains the fix.

[nikolayemrikh]

Thank you so much!