Monaco Editor for Python - "this._fileService.onWillActivateFileSystemProvider is not a function" Error

[intansemc2]

I've implemented the Monaco editor in SvelteKit based on the examples/src/bare example. The example runs fine and the console has no errors, but when I open the browser, there is an error and the website is empty.
Console:

Website:

Here is my package.json

{
    "name": "online-ide",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --check . && eslint .",
        "format": "prettier --write ."
    },
    "devDependencies": {
        "@sveltejs/adapter-auto": "^3.0.0",
        "@sveltejs/adapter-static": "^3.0.1",
        "@sveltejs/kit": "^2.0.0",
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "@types/eslint": "^8.56.7",
        "@types/node": "^20.12.13",
        "autoprefixer": "^10.4.19",
        "eslint": "^9.0.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-svelte": "^2.36.0",
        "globals": "^15.0.0",
        "monaco-editor": "^0.49.0",
        "postcss": "^8.4.38",
        "prettier": "^3.1.1",
        "prettier-plugin-svelte": "^3.1.2",
        "prettier-plugin-tailwindcss": "^0.5.14",
        "svelte": "^5.0.0-next.1",
        "svelte-check": "^3.6.0",
        "tailwindcss": "^3.4.3",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "typescript-eslint": "^8.0.0-alpha.20",
        "vite": "^5.0.3"
    },
    "type": "module",
    "dependencies": {
        "@codingame/monaco-vscode-configuration-service-override": "~5.2.0",
        "@codingame/monaco-vscode-extensions-service-override": "~5.2.0",
        "@codingame/monaco-vscode-files-service-override": "~5.2.0",
        "@codingame/monaco-vscode-groovy-default-extension": "~5.2.0",
        "@codingame/monaco-vscode-javascript-default-extension": "~5.2.0",
        "@codingame/monaco-vscode-json-default-extension": "~5.2.0",
        "@codingame/monaco-vscode-keybindings-service-override": "~5.2.0",
        "@codingame/monaco-vscode-languages-service-override": "~5.2.0",
        "@codingame/monaco-vscode-lifecycle-service-override": "~5.2.0",
        "@codingame/monaco-vscode-localization-service-override": "~5.2.0",
        "@codingame/monaco-vscode-model-service-override": "~5.2.0",
        "@codingame/monaco-vscode-python-default-extension": "~5.2.0",
        "@codingame/monaco-vscode-standalone-json-language-features": "~5.2.0",
        "@codingame/monaco-vscode-standalone-languages": "~5.2.0",
        "@codingame/monaco-vscode-standalone-typescript-language-features": "~5.2.0",
        "@codingame/monaco-vscode-textmate-service-override": "~5.2.0",
        "@codingame/monaco-vscode-theme-defaults-default-extension": "~5.2.0",
        "@codingame/monaco-vscode-theme-service-override": "~5.2.0",
        "@codingame/monaco-vscode-typescript-basics-default-extension": "~5.2.0",
        "@codingame/monaco-vscode-typescript-language-features-default-extension": "~5.2.0",
        "daisyui": "^4.11.1",
        "isomorphic-dompurify": "^2.11.0",
        "marked": "^12.0.2",
        "monaco-editor-wrapper": "^5.1.2",
        "monaco-languageclient": "^8.4.0",
        "pocketbase": "^0.21.3",
        "svelte-hero-icons": "^5.1.0",
        "vscode": "npm:@codingame/monaco-vscode-api@~5.2.0",
        "vscode-json-languageservice": "~5.3.11",
        "vscode-languageclient": "^9.0.1",
        "vscode-languageserver": "~9.0.1",
        "vscode-uri": "~3.0.8",
        "vscode-ws-jsonrpc": "^3.3.1"
    }
}

Font-end files
+page.svelte

<script lang="ts">
    import { onMount } from 'svelte';
    import { configureMonacoWorkers, runClient } from './client';

    onMount(async () => {
        configureMonacoWorkers();
        await runClient();
    });
</script>

<h2>JSON Language Client & Language Server (Web Socket)</h2>
<div id="monaco-editor-root" style="width:800px;height:600px;border:1px solid grey"></div>

client.ts

import * as monaco from 'monaco-editor';
import { initServices } from 'monaco-languageclient/vscode/services';
// monaco-editor does not supply json highlighting with the json worker,
// that's why we use the textmate extension from VSCode
import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override';
import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override';
import '@codingame/monaco-vscode-theme-defaults-default-extension';
import '@codingame/monaco-vscode-json-default-extension';
import { MonacoLanguageClient } from 'monaco-languageclient';
import { WebSocketMessageReader, WebSocketMessageWriter, toSocket } from 'vscode-ws-jsonrpc';
import { CloseAction, ErrorAction, MessageTransports } from 'vscode-languageclient';
import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory';

export const configureMonacoWorkers = () => {
    useWorkerFactory({
        ignoreMapping: true,
        workerLoaders: {
            editorWorkerService: () =>
                new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), {
                    type: 'module'
                })
        }
    });
};
export const runClient = async () => {
    await initServices({
        serviceConfig: {
            userServices: {
                ...getThemeServiceOverride(),
                ...getTextmateServiceOverride()
            },
            debugLogging: true
        }
    });

    // register the JSON language with Monaco
    monaco.languages.register({
        id: 'python',
        extensions: ['.py'],
        aliases: ['python'],
        mimetypes: ['application/python']
    });

    // create monaco editor
    monaco.editor.create(document.getElementById('monaco-editor-root')!, {
        value: `print('Hello, World!')`,
        language: 'python',
        automaticLayout: true,
        wordBasedSuggestions: 'off'
    });
    initWebSocketAndStartClient('ws://localhost:3000');
};

/** parameterized version , support all languageId */
export const initWebSocketAndStartClient = (url: string): WebSocket => {
    const webSocket = new WebSocket(url);
    webSocket.onopen = () => {
        const socket = toSocket(webSocket);
        const reader = new WebSocketMessageReader(socket);
        const writer = new WebSocketMessageWriter(socket);
        const languageClient = createLanguageClient({
            reader,
            writer
        });
        languageClient.start();
        reader.onClose(() => languageClient.stop());
    };
    return webSocket;
};

export const createLanguageClient = (transports: MessageTransports): MonacoLanguageClient => {
    return new MonacoLanguageClient({
        name: 'Python Language Client',
        clientOptions: {
            // use a language id as a document selector
            documentSelector: ['python'],
            // disable the default error handler
            errorHandler: {
                error: () => ({ action: ErrorAction.Continue }),
                closed: () => ({ action: CloseAction.DoNotRestart })
            }
        },
        // create a language client connection from the JSON RPC connection on demand
        connectionProvider: {
            get: () => {
                return Promise.resolve(transports);
            }
        }
    });
};

I started the Python language server by installing these packages:

python-lsp-server
python-lsp-server[websockets]
pylsp-mypy
python-lsp-isort
python-lsp-black
pyls-memestra
pylsp-rope
python-lsp-ruff

and ran pylsp --ws --port 3000

I've tried cloning and running other projects using monaco-languageclient, but most of them are 2-4 years old and don't run properly. Please help me.

[kaisalmen]

Hi @intansemc2 instead of copy pasting you code here, can you please share a small GitHub repo, we can clone and play around?
Are you aware you need something on the server side to read and send the websocket message and provide them to the language server, see here and other imported code.

[intansemc2]

Thank you for your response.
I have published the source code for my project at the following link: https://github.com/intansemc2/test-monaco-languageclient.
I really hope you'll take a look and see if you can help me further.
I thought coding a separate server wasn't necessary because it uses websockets.

[kaisalmen]

I thought coding a separate server wasn't necessary because it uses websockets.

But you need something to take the data from/to websockets to std-in/-out which is feed to the language server. That is exactly what is done in the python / json / groovy examples we have in this repo.

[kaisalmen]

This "link" happens here: https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/src/common/node/server-commons.ts#L44