Question about langium with GLSP

[YourHarbour]

Hi,

I'm new in langium and want to embed the langium editor with GLSP(Graphical language server platform build with sprotty).
For example, I want to pop up a small Monaco editor when the user click the node to let them modify the node's properties.
However, I have some problems when I tried to combine the code for Langium/Monaco editor/GLSP.

I initiated the langium project with web worker (following the official guide), and then npm run build to generate the 'out' folder for the code (I didn't change anything about the langium project).
I copy-paste the code into the GLSP folder:

And then I called the functions from them:

    protected async createEditor(): Promise<void> {
        const monacoEditorRoot = document.getElementById('monaco-editor-root') as HTMLElement;
        if (monacoEditorRoot) {
            console.log('Found monacoEditorRoot:', monacoEditorRoot.id);
            configureMonacoWorkers();

            try {
                await executeClassic(monacoEditorRoot);
                console.log('Monaco Editor initialized successfully.');
            } catch (error) {
                console.error('Error initializing Monaco Editor:', error);
            }
        }
    }

The editor seems loaded but the console log shows it stucked at:

2024-12-10T00:42:26.917Z root INFO Starting Language Client:  {}
2024-12-10T00:42:26.917Z root INFO Initializing vscode services. Caller: monaco-editor (68)
2024-12-10T00:42:26.921Z root INFO Loading service: codeEditorService
2024-12-10T00:42:26.924Z root INFO Loading service: editorService
2024-12-10T00:42:26.924Z root INFO Loading service: textEditorService
2024-12-10T00:42:26.924Z root INFO Loading service: editorGroupsService
2024-12-10T00:42:26.924Z root INFO Loading service: fileService
2024-12-10T00:42:26.924Z root INFO Loading service: textFileService
2024-12-10T00:42:26.924Z root INFO Loading service: filesConfigurationService
2024-12-10T00:42:26.924Z root INFO Loading service: elevatedFileService
2024-12-10T00:42:26.924Z root INFO Loading service: keybindingService
2024-12-10T00:42:26.924Z root INFO Loading service: keyboardLayoutService
2024-12-10T00:42:26.924Z root INFO Loading service: commandService
2024-12-10T00:42:26.924Z root INFO Loading service: labelService
2024-12-10T00:42:26.924Z root INFO Loading service: configurationService
2024-12-10T00:42:26.924Z root INFO Loading service: contextService
2024-12-10T00:42:26.924Z root INFO Loading service: textResourceConfigurationService
2024-12-10T00:42:26.924Z root INFO Loading service: workspaceEditingService
2024-12-10T00:42:26.924Z root INFO Loading service: workspacesService
2024-12-10T00:42:26.924Z root INFO Loading service: textResourcePropertiesService
2024-12-10T00:42:26.924Z root INFO Loading service: languageService
2024-12-10T00:42:26.924Z root INFO Loading service: ILanguageStatusService
2024-12-10T00:42:26.924Z root INFO Loading service: textModelService

and no more loading, I know in the official example there will be more to load:

Loading service: codeEditorService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: editorService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: textEditorService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: editorGroupsService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: fileService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: textFileService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: filesConfigurationService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: elevatedFileService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: keybindingService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: keyboardLayoutService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: commandService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: labelService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: configurationService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: contextService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: textResourceConfigurationService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: workspaceEditingService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: workspacesService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: textResourcePropertiesService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: themeService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: textMateTokenizationFeature
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: languageService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: ILanguageStatusService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: textModelService
chunk-645LP2ME.js?v=3262e1c5:26764 Initialization of vscode services completed successfully.
monaco-editor-wrapper.js?v=3262e1c5:17301 Starting monaco-editor (61)

monaco-editor-wrapper.js?v=3262e1c5:17301 Init of Extended App was completed.
monaco-editor-wrapper.js?v=3262e1c5:17301 languageClientWrapper (unnamed): Started successfully.
monaco-editor-wrapper_workerFactory.js?v=3262e1c5:70 getWorker: moduleId: workerMain.js label: editorWorkerService

And no editor showed on my div element.
I'm not sure whats going on here and there are no error messages in the console.

Could you help me with this?

Thank you.

[kaisalmen]

Hi @YourHarbour let's discuss a solution in TypeFox/monaco-languageclient#798