Monaco Editor Console error: Unexpected Usage at EditorSimpleWorker.loadForeignModule

Question

I am getting Unexpected Usage error Console error when using Monaco Editor inside Electron App. The same code works in Website mode but not in Bundled Electorn app.

As mentioned in comment at it may be due to Electron bundle uses file:/// as URI scheme and webworker doesn't work. I have tried solutions from multiple threads 1, 2 but none worked for me. I have also tried to add entry points in webpack for editor.worker, json/typescript workers.

Is there a workaround to get Monaco Webworker issue fixed fro Electron bundled app?

Weingarten

We have moved to codemirror.net due to this reason. As that provides most of functionality required with custom plugins/scripts. – Weingarten

Answer 1

We were running into this issue as well, but noticed the editor was still appearing despite the error.

After investigating, it appears this function loadForeignModule gets called, but never gets passed a _foreignModuleFactory, and throws an error when that is not passed. So something is triggering this fn to be called in an electron context where it wouldn't normally be, but the fn isn't really set up properly or called properly.

We simply disabled the throwing of the error in the node_modules folder in the right file and that worked:

//node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js 
//line 502

return Promise.resolve([]);
// return Promise.reject(new Error(`Unexpected usage`));

To make sure this change persists, we coped the file outside node_modules and are running a postinstall script to overwrite the monaco-provided file with our modified one:

{"scripts": {
  "postinstall": "cp ./editorSimpleWorker.js ./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js"
}}

Overplus