initService throws TypeError: workspaceService.acquireInstantiationService is not a function

[rubenfiszel]

I'm upgrading from 6.0.0 to latest

I migrated to use the new initServices with all the required extension but initServices always throw:

Uncaught (in promise) TypeError: workspaceService.acquireInstantiationService is not a function

[rubenfiszel]

Those are the versions that I use:

https://github.com/windmill-labs/windmill/pull/2401/files#diff-da6498268e99511d9ba0df3c13e439d10556a812881c9d03955b2ef7c6c1c655

and my code changes to the editor: https://github.com/windmill-labs/windmill/pull/2401/files#diff-6c66cfa8f98870ad45bef9f1a81a9e5e745c2a044eb9406cb47a97304ce2e45e

[CGNonofr]

It happens when the configuration service override is imported but the returned services are not used

One way for it to happens is to create an editor before calling initServices

[kaisalmen]

@rubenfiszel I will close this. If I am an error we can re-open or you open up a follow-up discussion or issue.

[todwang]

When I use version 7.3.0, I encounter the same error.

TypeError: workspaceService.acquireInstantiationService is not a function

code: ` import configurationService from "@codingame/monaco-vscode-configuration-service-override" import keybindingsService from "@codingame/monaco-vscode-keybindings-service-override" import modelService from '@codingame/monaco-vscode-model-service-override'

await initServices({ ...modelService(), ...configurationService(vscode.Uri.file('/workspace')), ...keybindingsService() }); `

[Lemour-sudo]

@todwang did you manage to get around the problem?

[Dams591]

Getting the same issue, any idea ?

[kaisalmen]

Hi @Dams591 are you getting the same issue with the current version of the lib? Can you share a reproducible example / repo? Thank you.

[saeedvaziry]

Same issue here

[kaisalmen]

Hi @saeedvaziry do you see the same error message? Can you share a reproducible example / repo? Thank you.

[saeedvaziry]

@kaisalmen

I am trying to setup monaco editor and a language server for PHP.

here is the Vue code in the client

    import { onMounted, onBeforeUnmount, ref } from 'vue'
    import * as monaco from 'monaco-editor'
    import * as vscode from 'vscode'
    import { initServices } from 'monaco-languageclient/vscode/services'
    import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory'
    import '@codingame/monaco-vscode-php-default-extension'
    import getEditorServiceOverride from '@codingame/monaco-vscode-editor-service-override'
    import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override'
    import { useOpenEditorStub } from 'monaco-editor-wrapper/vscode/services'

    // Props
    const props = defineProps({
        language: {
            type: String,
            default: 'php',
        },
        readonly: {
            type: Boolean,
            default: false,
        },
        value: {
            type: String,
            default: '',
        },
        wrap: {
            type: Boolean,
            default: false,
        },
        path: {
            type: String,
            default: '',
        },
    })

    const editorContainer = ref(null)

    let editor = null
    const emit = defineEmits(['update:value'])

    useWorkerFactory({
        ignoreMapping: true,
        workerLoaders: {
            editorWorkerService: () =>
                new Worker(
                    new URL(
                        'monaco-editor/esm/vs/editor/editor.worker.js',
                        import.meta.url
                    ),
                    { type: 'module' }
                ),
        },
    })

    onMounted(async () => {
        await initServices({
            serviceConfig: {
                debugLogging: true,
                userServices: {
                    ...getEditorServiceOverride(useOpenEditorStub),
                    ...getKeybindingsServiceOverride(),
                },
                workspaceConfig: {
                    workspaceProvider: {
                        trusted: true,
                        workspace: {
                            workspaceUri: monaco.Uri.file(`${props.path}`),
                        },
                        async open() {
                            return false
                        },
                    },
                },
            },
            caller: 'editor-' + tabsStore.activeTabIndex,
        })

        if (editorContainer.value) {
            setTimeout(async () => {
                editor = monaco.editor.create(editorContainer.value, {
                    readOnly: props.readonly,
                    fontSize: settingsStore.settings.editor.fontSize,
                    minimap: {
                        enabled: false,
                    },
                    wordWrap: settingsStore.settings.editor.wordWrap,
                    theme: settingsStore.settings.theme,
                    stickyScroll: {
                        enabled: false,
                    },
                    automaticLayout: true,
                    // glyphMargin: false,
                    // fontLigatures: true,
                    // scrollBeyondLastLine: false,
                    // lightbulb: { enabled: false },
                    wordBasedSuggestions: 'off',
                })

                let editorModel = monaco.editor.createModel(
                    props.value,
                    'php',
                    vscode.Uri.file(
                        `${props.path}/${tab.value.name}-${props.readonly ? 'readonly' : 'editable'}.php`
                    )
                )

                editor.setModel(editorModel)

                editor.onDidChangeModelContent(() => {
                    emit('update:value', editor.getValue())
                })

                if (!props.readonly) {
                    await createWebSocketClient('ws://127.0.0.1:8080')
                }
            }, 1000)
        }
    })
...

When I try to pass anything to the userServices of the serviceConfig it shows that error.

Without passing anything it works but the editor doesn't communicate to the LSP. It only communicates for the first few messages only like initialize.

So here I am trying to figure out first what to pass to the userServices but anything I pass ends up with this error message.

[kaisalmen]

@saeedvaziry have you tried adding:

import getConfigurationServiceOverride from '@codingame/monaco-vscode-configuration-service-override';

or removing/commenting the workspaceConfig.

If you look at bare monaco-languageclient example it only initializes theme and textmate, because it requires it for the json highlighting instructions being loaded, but apart from it nothing else.

[saeedvaziry]

@kaisalmen the error goes away but still it doesn't work as expected.

Maybe you can help me figure out what I am doing wrong here.

In the version below which is a copy from the python example of the repo, the editor works fine:

wrapper = new MonacoEditorLanguageClientWrapper()
if (!wrapper.isStarted()) {
    await wrapper.dispose()
    await wrapper.init({
        languageClientConfig: {
            languageId: 'php',
            name: 'PHP Language Server',
            options: {
                $type: 'WebSocketUrl',
                url: 'ws://127.0.0.1:8080',
            },
            clientOptions: {
                documentSelector: ['php'],
                workspaceFolder: {
                    index: 0,
                    name: 'workspace-' + tab.value.name,
                    uri: vscode.Uri.parse(`${props.path}`),
                },
            },
        },
        wrapperConfig: {
            editorAppConfig: {
                $type: 'extended',
                codeResources: {
                    main: {
                        text: props.value,
                        // uri: vscode.Uri.parse(
                        //     `${props.path}/hello.php`
                        // ),
                        fileExt: 'php',
                    },
                },
                userConfiguration: {
                    json: JSON.stringify({
                        'workbench.colorTheme':
                            'Default Dark Modern',
                    }),
                },
                editorOptions: {
                    readOnly: props.readonly,
                    fontSize:
                        settingsStore.settings.editor.fontSize,
                    minimap: {
                        enabled: false,
                    },
                    wordWrap:
                        settingsStore.settings.editor.wordWrap,
                    theme: settingsStore.settings.theme,
                    stickyScroll: {
                        enabled: false,
                    },
                    automaticLayout: true,
                    glyphMargin: false,
                    scrollBeyondLastLine: false,
                    lightbulb: { enabled: false },
                    wordBasedSuggestions: 'off',
                    suggestOnTriggerCharacters: true,
                    quickSuggestions: {
                        other: true,
                        comments: true,
                        strings: true,
                    },
                    parameterHints: {
                        enabled: true,
                    },
                },
                useDiffEditor: false,
            },
        },
        loggerConfig: {
            enabled: true,
            debugEnabled: true,
        },
    })
}

await wrapper.start(editorContainer.value)

here is a video:

But I am trying to make it work with the code below which I have more control over the editor:

useWorkerFactory({
    ignoreMapping: true,
    workerLoaders: {
        editorWorkerService: () =>
            new Worker(
                new URL(
                    'monaco-editor/esm/vs/editor/editor.worker.js',
                    import.meta.url
                ),
                { type: 'module' }
            ),
    },
})

onMounted(async () => {
    await initServices({
        serviceConfig: {
            debugLogging: true,
        },
        caller: 'editor-' + tabsStore.activeTabIndex,
    })

    if (editorContainer.value) {
        editor = monaco.editor.create(editorContainer.value, {
            readOnly: props.readonly,
            fontSize: settingsStore.settings.editor.fontSize,
            minimap: {
                enabled: false,
            },
            wordWrap: settingsStore.settings.editor.wordWrap,
            theme: settingsStore.settings.theme,
            stickyScroll: {
                enabled: false,
            },
            automaticLayout: true,
            // glyphMargin: false,
            // fontLigatures: true,
            // scrollBeyondLastLine: false,
            // lightbulb: { enabled: false },
            wordBasedSuggestions: 'off',
        })

        let editorModel = monaco.editor.createModel(
            props.value,
            'php',
            vscode.Uri.file(
                `${props.path}/${tab.value.name}-${props.readonly ? 'readonly' : 'editable'}.php`
            )
        )

        editor.setModel(editorModel)

        editor.onDidChangeModelContent(() => {
            emit('update:value', editor.getValue())
        })

        if (!props.readonly) {
            await createWebSocketClient('ws://127.0.0.1:8080')
        }
    }
})

and the outcome:

[kaisalmen]

@saeedvaziry btw, you can get the editor or the diffeEditor from the wrapper whenever you want (e.g. re-configure it): https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper/src/wrapper.ts#L132-L138

Regarding your second question. Have you loaded any syntax highlighting instructions? You can use these packages: @codingame/monaco-vscode-standalone-language (monarch) or @codingame/monaco-vscode-php-default-extension (textmate)