Uncaught Error: Cannot have two contributions with the same id editor.contrib.referencesController

[hunger]

I am trying to update my monaco editor to 1.41.0, with the recommended monaco-langaugeclient 6.4.6 and monaco-vscode-api 1.81.7. I used to have some code that worked using monaco-editor 0.36 and now have to update the entire service setup.

I have followed to demo (I think), calling the initialize function like this:

    await initializeMonacoServices({
        ...getConfigurationServiceOverride(monaco.Uri.file("/tmp")),
        ...getEditorServiceOverride(openEditor),
        ...getLanguagesServiceOverride(),
        ...getModelServiceOverride(),
        ...getSnippetServiceOverride(),
        ...getStorageServiceOverride(),
    });

I think this is probably more than what I even need ;-) But whatever I do (even when calling the initialize method without any services) I do run into this error:

Uncaught Error: Cannot have two contributions with the same id editor.contrib.referencesController

initialize@http://localhost:3001/node_modules/.vite/deps/chunk-BRCXZLFB.js?v=7b9dc333:87116:27
CodeEditorWidget2@http://localhost:3001/node_modules/.vite/deps/chunk-BRCXZLFB.js?v=7b9dc333:87419:25
StandaloneCodeEditor2@http://localhost:3001/node_modules/.vite/deps/chunk-3DMOLLPZ.js?v=7b9dc333:109:5
StandaloneEditor2@http://localhost:3001/node_modules/.vite/deps/chunk-3DMOLLPZ.js?v=7b9dc333:213:5
@http://localhost:3001/node_modules/.vite/deps/vscode_monaco.js?v=7b9dc333:497:7
ConfiguredStandaloneEditor2@http://localhost:3001/node_modules/.vite/deps/vscode_monaco.js?v=7b9dc333:3688:5
_createInstance@http://localhost:3001/node_modules/.vite/deps/chunk-BRCXZLFB.js?v=7b9dc333:57950:20
createInstance@http://localhost:3001/node_modules/.vite/deps/chunk-BRCXZLFB.js?v=7b9dc333:57925:21
createConfiguredEditor@http://localhost:3001/node_modules/.vite/deps/vscode_monaco.js?v=7b9dc333:3784:52
setup_editor@http://localhost:3001/src/editor_widget.ts:433:42
EditorPaneWidget@http://localhost:3001/src/editor_widget.ts:155:25
EditorWidget@http://localhost:3001/src/editor_widget.ts:587:20
setup@http://localhost:3001/src/index.ts:391:18
main/<@http://localhost:3001/src/index.ts:483:10
promise callback*main@http://localhost:3001/src/index.ts:482:91
EventHandlerNonNull*@http://localhost:3001/src/index.ts:493:1
    unexpectedErrorHandler errors.js:15
    setTimeout handler*node_modules/monaco-editor/esm/vs/base/common/errors.js/ErrorHandler/this.unexpectedErrorHandler errors.js:10
    onUnexpectedError errors.js:42
    onUnexpectedError errors.js:72
    initialize codeEditorContributions.js:36
    CodeEditorWidget2 codeEditorWidget.js:213
    StandaloneCodeEditor2 standaloneCodeEditor.js:67
    StandaloneEditor2 standaloneCodeEditor.js:183
    <anonymous> injection.js:11
    ConfiguredStandaloneEditor2 monaco.js:79
    _createInstance instantiationService.js:97
    createInstance instantiationService.js:68
    createConfiguredEditor monaco.js:175
    setup_editor editor_widget.ts:562
    EditorPaneWidget editor_widget.ts:257
    EditorWidget editor_widget.ts:770
    setup index.ts:468
    main index.ts:591
    promise callback*main index.ts:590
    EventHandlerNonNull* index.ts:605
errors.js:15:26

I am pretty sure I am just using this wrong, but I would still appreciate any ideas on how I can debug this.

[CGNonofr]

Did you apply the treemending patch? :) see https://github.com/CodinGame/monaco-vscode-api#installation

[hunger]

I do have that postinstall snippet, yes.

I see this in my output on npm install:

Monaco-editor has already been tree-mended, ignoring

[CGNonofr]

Isn't it a cache issue then? because this contribution registration is removed from monaco-editor by the treemending script

[hunger]

I did remove node_modules + package-lock.json before doing the npm install, so I do hope the caches were fresh.

[CGNonofr]

What is the result of a npm list monaco-editor?

[hunger]

> npm list monaco-editor                                                                                                                   
slintpad@1.3.0 /home/tobias/src/slint/master/tools/slintpad                                                                              
├── monaco-editor@0.41.0                                                                                                                 
├─┬ monaco-languageclient@6.4.6                                                                                                          
| └── monaco-editor@0.41.0 deduped                                                                                                       
└─┬ vscode@npm:@codingame/monaco-vscode-api@1.81.7                                                                                       
  └── monaco-editor@0.41.0 deduped                                                                                                                                     ```

`monaco-languageclient` mentions having a post-install script that mends the tree. Maybe that did it already?

[CGNonofr]

I'm running out of ideas!

what is the content of your node_modules/monaco-editor/esm/vs/editor/editor.main.js?

[hunger]

It's pretty short:

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
import './editor.all.js';
import './standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js';
export * from './editor.api.js';

[CGNonofr]

So it's fine!

The only remaining idea is your bundler duplicating the code for some reasons

Can you add a console.log inside node_modules/vscode/dist/vscode/src/vs/workbench/contrib/codeEditor/browser/workbenchReferenceSearch.js to see it it's run twice?

[hunger]

I put a console.log into node_modules/vscode/dist/vscode/vs/workbench/contrib/codeEditor/browser/workbenchReferenceSearch.js, right after the registerEditorContribution line:

I do not see that log message at all :-(

That is also the only occurrence of a file with that name in my node_modules folder. I checked to make sure I did not end up with some other VSCode code that gets called instead somehow.

[CGNonofr]

That's weirder and weirder!

It's probably a cache issue this time!

Btw, you can also put a debugger in node_modules/monaco-editor/esm/vs/editor/browser/editorExtensions.js in the registerEditorContribution function to see who calls it :shrug:

[kaisalmen]

@hunger and @CGNonofr I have seen this error with rivaling monaco versions. 🤷‍♂️ Some questions and ideas: @hunger how do you import monaco-editor? Do you do it multiple times? Are you using a workspace? I am asking because there have been artifacts in sub-folders in the past. Also try vite --debug --force to kill the vite cache and clear the browser cache.

With the latest version import * as monaco from 'monaco-editor'; is sufficient, btw.

[hunger]

@CGNonofr: If I remove monaco-languageclient from my package.toml, then the post-install says it did tree-mend monaco-editor. So it does indeed seem to be monaco-languageclient that does the treemending for me :-)

[kaisalmen]

Yes, that's why:

"postinstall": "monaco-treemending",

[hunger]

@kaisalmen: I do import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; in several files. Is that a problem? I just have one package.json file that is not that complex: I have a language server in rust that I compile to WASM with one npm script and a small web site using monaco-editor that talks to that LSP running in a web worker. Not overly complex and vite does a lot of magic to make that work somehow :-)

I am coming from monaco-editor 0.36.1. Maybe I missed a necessary change in the update? E.g. I still set up the editor workers as I did in that old version.

PS: I have now simplified to import * as monaco from 'monaco-editor';

[hunger]

The current code using monaco-editor 0.36.1 is here by the way: https://github.com/slint-ui/slint/tree/master/tools/slintpad

My quick-and-probably-too-dirty attempt to upgrade is in my private fork: https://github.com/hunger/slint/tree/slintpad_monaco_update/tools/slintpad

[hunger]

I disabled the Language Server creation which apparently raced with the call to the initialize function for the time being. I also set a breakpoint on the registerEditorContribution function in node_modules/vscode/dist/vscode/src/vs/workbench/contrib/codeEditor/browser/workbenchReferenceSearch.js and that is hit once only.

I still get this on the console though:

Uncaught Error: Cannot have two contributions with the same id editor.contrib.referencesController

initialize@http://localhost:3001/node_modules/.vite/deps/chunk-PHZXIX5K.js?v=544a0f1a:87116:27
CodeEditorWidget2@http://localhost:3001/node_modules/.vite/deps/chunk-PHZXIX5K.js?v=544a0f1a:87419:25
StandaloneCodeEditor2@http://localhost:3001/node_modules/.vite/deps/chunk-DY62TABW.js?v=544a0f1a:109:5
StandaloneEditor2@http://localhost:3001/node_modules/.vite/deps/chunk-DY62TABW.js?v=544a0f1a:213:5
@http://localhost:3001/node_modules/.vite/deps/vscode_monaco.js?v=544a0f1a:497:7
ConfiguredStandaloneEditor2@http://localhost:3001/node_modules/.vite/deps/vscode_monaco.js?v=544a0f1a:3688:5
_createInstance@http://localhost:3001/node_modules/.vite/deps/chunk-PHZXIX5K.js?v=544a0f1a:57950:20
createInstance@http://localhost:3001/node_modules/.vite/deps/chunk-PHZXIX5K.js?v=544a0f1a:57925:21
createConfiguredEditor@http://localhost:3001/node_modules/.vite/deps/vscode_monaco.js?v=544a0f1a:3784:52
setup_editor@http://localhost:3001/src/editor_widget.ts?t=1694600258361:440:42
EditorPaneWidget@http://localhost:3001/src/editor_widget.ts?t=1694600258361:162:25
EditorWidget@http://localhost:3001/src/editor_widget.ts?t=1694600258361:594:20
setup@http://localhost:3001/src/index.ts:391:18
main/</<@http://localhost:3001/src/index.ts:485:12
promise callback*main/<@http://localhost:3001/src/index.ts:484:73
promise callback*main@http://localhost:3001/src/index.ts:482:22
EventHandlerNonNull*@http://localhost:3001/src/index.ts:499:1
    unexpectedErrorHandler errors.js:15
    setTimeout handler*node_modules/monaco-editor/esm/vs/base/common/errors.js/ErrorHandler/this.unexpectedErrorHandler errors.js:10
    onUnexpectedError errors.js:42
    onUnexpectedError errors.js:72
    initialize codeEditorContributions.js:36
    CodeEditorWidget2 codeEditorWidget.js:213
    StandaloneCodeEditor2 standaloneCodeEditor.js:67
    StandaloneEditor2 standaloneCodeEditor.js:183
    <anonymous> injection.js:11
    ConfiguredStandaloneEditor2 monaco.js:79
    _createInstance instantiationService.js:97
    createInstance instantiationService.js:68
    createConfiguredEditor monaco.js:175
    setup_editor editor_widget.ts:571
    EditorPaneWidget editor_widget.ts:264
    EditorWidget editor_widget.ts:779
    setup index.ts:468
    main index.ts:594
    promise callback*main/< index.ts:593
    promise callback*main index.ts:590
    EventHandlerNonNull* index.ts:613
errors.js:15:26

followed by this new message:

Uncaught (in promise) Error: Unable to modify read-only file 'https://52d2c05a-5f58-432a-838a-387ea17b49fa.slint.rs/main.slint'
    FileOperationError files.js:348
    throwIfFileSystemIsReadonly fileService.js:930
    writeFile fileService.js:247
    writeFile monaco.js:128
    createModelReference monaco.js:135
    createModel editor_widget.ts:175
    set_demo editor_widget.ts:927
    EditorWidget editor_widget.ts:834
    setup index.ts:468
    main index.ts:594
    promise callback*main/< index.ts:593
    promise callback*main index.ts:590
    EventHandlerNonNull* index.ts:613
files.js:348:8
    createModel editor_widget.ts:179
    AsyncFunctionThrow self-hosted:856
    (Async: async)
    set_demo editor_widget.ts:927
    EditorWidget editor_widget.ts:834
    setup index.ts:468
    main index.ts:594
    (Async: promise callback)
    main index.ts:593
    (Async: promise callback)
    main index.ts:590
    (Async: EventHandlerNonNull)
    <anonymous> index.ts:613

which I do understand ;-)

[hunger]

I removed some import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; and now the first message is gone!

Thank you all for your time and patience with my issue, I'll close it now.

[kaisalmen]

@hunger that's good news!

I removed some import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; and now the first message is gone!

@CGNonofr how can this be if there are no rivaling monaco-editor versions?

[hunger]

Next step: Move my hand-crafted model management over to the new-thing(TM).

I had a few different imports to files in monaco-editor in my codebase and have replaced all of them with a simple "monaco-editor" now. I guess one of them is not intended for inclusion by users anymore.

[CGNonofr]

@hunger that's good news!

I removed some import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; and now the first message is gone!

@CGNonofr how can this be if there are no rivaling monaco-editor versions?

Yeah that's doesn't make sense to me at all. I still vote for a cache issue