False negative: compiling a package containing `monaco-editor-wrapper` for prod gives error related to servicesOverrides and block initialization, even if all features work

[vemonet]

Hi, we are using the monaco-editor-wrapper to integrate Monaco editor + a custom language server (for the SPARQL query language, like SQL for graphs) in a npm package, using vite to build. The idea is to package the editor and language server in one easy to use JS class:

const editor = new Editor(document.getElementById("editor"));

Everything works, but when using the package we face issues related to service override and we cannot find a way to overcome this.

Reproduce

You can find the whole code here: https://github.com/vemonet/Yasgui (I'll point to the relevant files later)

Easy to run, install:

npm i

✅ Run in dev, it will work flawlessly, not a single error in the console, everything as expected:

npm run dev

⚠️ Build packages for production and deploy a demo with these packages, build will work and overall the demo will work, but you can't scroll or right click in most of the page, and there are errors in the console:

npm run build && npm run demo:preview

You can also just go directly to the demo deployment on GitHub Pages and open the console to see the errors I will describe below in live: https://vemonet.github.io/Yasgui/

Using NodeJS v23.11.0 on apple silicon macos, with following pkg/versions:

"@codingame/monaco-vscode-editor-api": "~18.1.0",
"monaco-editor-wrapper": "^6.9.0",
"vscode": "npm:@codingame/monaco-vscode-extension-api@~18.1.0",
"@codingame/monaco-vscode-editor-service-override": "~18.1.0"

The problem

Open the browser console to see the errors thrown by the Monaco editor:

INFO src/server/message_handler/lifecycle.rs:46 Connected to: Code - OSS 1.99.3 1adab53a-c4f3-4cbf-b3f3-22cfbae63240:293:13
Uncaught (in promise) TypeError: e.get(...).startup is not a function
    <anonymous> https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:2460
    _deliver https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:63
    fire https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:63
    startup https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:943
    invokeFunction https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:688
    startup https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:943
index-exmetFGC.js:2460:16091
Uncaught (in promise) Error: Unsupported: ViewDescriptorService$1.getViewContainersByLocation is not supported. You are using a feature without registering the corresponding service override.
    t https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:895
    G https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:2443
    b https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:2443
    <anonymous> https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:2443
    _deliver https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:63
    _deliverQueue https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:63
    fire https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:63
    startup https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:943
    invokeFunction https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:688
    startup https://vemonet.github.io/Yasgui/assets/index-exmetFGC.js:943
index-exmetFGC.js:895:10347
 INFO getWorker: moduleId: workerMain.js label: TextMateWorker

It is worth noting that these errors are triggered during the run of await wrapper.initAndStart(wrapperConfig);. The wrapper config itself is defined in this file

The e.get(..).startup error point to this snippet of compiled code (when following the console error file link):

setFullscreen(detectedFullScreen != null && !detectedFullScreen.guess, mainWindow);
onLayout(async (s) => {
  s.get(IWorkbenchLayoutService).startup();
});
onRenderWorkbench(async (s) => {
  s.get(IInstantiationService).createInstance(BrowserWindow);
});
function getServiceOverride$1(s, A) {

The piece that seems to trigger the first error is onLayout(async g=>{g.get(IWorkbenchLayoutService).startup()})

[!IMPORTANT]

Despite the error displayed in the console. The whole system works! (Monaco editor with syntax hightlighting, LSP, completions, diagnostics...).

It just has some issues to get initialized (syntax hightlighting is only triggered when you start modifying the text in the editor when deployed in prod), and using right-click on all of the elements on the page do not work, a part when done on the Monaco editor element (showing the custom right click behavior for VSCode). Which could indicate some issues with a VSCode layout service?

So the whole WASM and web worker setup works. There is just a tiny grain of sand that is breaking the clock

I checked the npm package readme and examples, but could not make it work. I fear it might just be a vite.config.ts setting to get right to enable proper building of the Monaco editor code.

I have tried to set this in the WrapperConfig:

      serviceOverrides: {
        ...getConfigurationServiceOverride(),
        ...getEditorServiceOverride(useOpenEditorStub),
        ...getKeybindingsServiceOverride()
      },

I have tried various combinations of include/exclude/optimizeDeps in the vite.config.ts. I have tried everything that but always exactly the same errors! Nothing works, nothing changes... (what is this serviceOverrides concept? If everything works the same with and without, it would be better not to have it, or it needs a fix)

So there we are: everything works, but there is this never called service override stuff that is popping only in production build (so the problem seems to be on the compilation tools, or their config, but everything works, so it's a false negative error). And even in production, the error itself does not even exist in practice since the whole system actually work with all its features.