Initialization of vscode services can only performed once!

[white10205]

When clicking mount, the client was rendered normally for the first time, and when clicking uninstall, it was also uninstalled normally. However, when clicking mount again, the client could not be rendered normally and the console reported an error
Initialization of vscode services can only performed once!
Can it only be mounted once? Have you considered the scenario of needing to uninstall and then remount?

/* --------------------------------------------------------------------------------------------
 * Copyright (c) 2024 TypeFox and others.
 * Licensed under the MIT License. See LICENSE in the package root for license information.
* ------------------------------------------------------------------------------------------ */

import * as vscode from 'vscode';
import { type RegisterLocalProcessExtensionResult } from '@codingame/monaco-vscode-api/extensions';
import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
import { createWrapperConfig } from './config.js';
import { configureDebugging } from '../../debugger/client/debugger.js';

export const runPythonReact = async () => {
    const appConfig = createWrapperConfig();
    
    const onLoad = async (wrapper: MonacoEditorLanguageClientWrapper) => {
        const result = wrapper.getExtensionRegisterResult('mlc-python-example') as RegisterLocalProcessExtensionResult;
        result.setAsDefaultApi();

        const initResult = wrapper.getExtensionRegisterResult('debugger-py-client') as RegisterLocalProcessExtensionResult | undefined;
        if (initResult !== undefined) {
            configureDebugging(await initResult.getApi(), appConfig.configParams);
        }

        await vscode.commands.executeCommand('workbench.view.explorer');
        await vscode.window.showTextDocument(appConfig.configParams.files.get('hello2.py')!.uri);
    };

    const root = ReactDOM.createRoot(document.getElementById('react-root')!);

    const App = () => {
        const [dispose, setDispose] = useState(false)
        return (
            <div style={{ 'backgroundColor': '#1f1f1f' }} >
                <div style={{ display: 'flex' }}>
                    <button onClick={() => setDispose(true)}>mount</button>
                    <button onClick={() => setDispose(false)}>unmount</button>
                </div>
                {
                    dispose ?
                        <MonacoEditorReactComp
                            wrapperConfig={appConfig.wrapperConfig}
                            style={{ 'height': '100%' }}
                            onLoad={onLoad}
                            onError={(e) => {
                                console.error(e);
                            }} /> : null
                }
            </div>
        );
    };
    root.render(<App />);
};

[kaisalmen]

Hi @white10205 please change to the latest version. This problem should no longer occur there as we ensure the monaco-vscode-api init is handled properly and only performed once.

[white10205]

Hi @white10205 please change to the latest version. This problem should no longer occur there as we ensure the monaco-vscode-api init is handled properly and only performed once.

I ran the latest example Python client in the repository
After unmounting, clicking to mount again triggers an error in the console
reactPython.tsx:50 No EditorService configured. monaco-editor will not be started.
How can I correctly uninstall and then remount this component？

/* --------------------------------------------------------------------------------------------
 * Copyright (c) 2024 TypeFox and others.
 * Licensed under the MIT License. See LICENSE in the package root for license information.
* ------------------------------------------------------------------------------------------ */

import { type RegisterLocalProcessExtensionResult } from '@codingame/monaco-vscode-api/extensions';
import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
import type { MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom/client';
import * as vscode from 'vscode';
import { configureDebugging } from 'monaco-languageclient/debugger';
import { createPythonAppConfig } from './config.js';

export const runPythonReact = async () => {
    let appConfig = createPythonAppConfig();

    const onVscodeApiInitDone = async (apiWrapper: MonacoVscodeApiWrapper) => {
        const result = apiWrapper.getExtensionRegisterResult('mlc-python-example') as RegisterLocalProcessExtensionResult;
        result.setAsDefaultApi();

        const initResult = apiWrapper.getExtensionRegisterResult('debugger-py-client') as RegisterLocalProcessExtensionResult | undefined;
        if (initResult !== undefined) {
            configureDebugging(await initResult.getApi(), appConfig.configParams);
        }

        await vscode.commands.executeCommand('workbench.view.explorer');
        await vscode.window.showTextDocument(appConfig.configParams.files.get('hello2.py')!.uri);
    };

    const root = ReactDOM.createRoot(document.getElementById('react-root')!);
    const App = () => {
        const [dispose, setDispose] = useState(false)
        useEffect(() => {
            console.log("editorAppConfig", appConfig);
        })
        return (

            <>
                <div> <button onClick={() => setDispose(true)}>mount</button> <button onClick={() => setDispose(false)}>unmount</button></div>
                <div style={{ 'backgroundColor': '#1f1f1f' }} >
                    {
                        dispose ? <MonacoEditorReactComp
                            vscodeApiConfig={appConfig.vscodeApiConfig}
                            editorAppConfig={appConfig.editorAppConfig}
                            languageClientConfig={appConfig.languageClientConfig}
                            style={{ 'height': '100%' }}
                            onVscodeApiInitDone={onVscodeApiInitDone}
                            onError={(e) => {
                                console.error(e);
                            }} /> : null
                    }
                </div>
            </>
        );
    };
    root.render(<App />);
};

[kaisalmen]

Hi @white10205 I have reproduced your issue and I will add a fix to #986 .

@CGNonofr when not using the EditorService there is no way to re-bind the parent HTML element or is there?
If this can only be done once, then we have to always use document.body in the react component if ViewsService or WorkbenchService is used, I guess. Otherwise, once the React Component is disposed, the original parent dom node used during initialized is lost. That is my current observation.

[CGNonofr]

@CGNonofr when not using the EditorService there is no way to re-bind the parent HTML element or is there?

No

If this can only be done once, then we have to always use document.body in the react component if ViewsService or WorkbenchService is used

When using the WorkbenchService, the container is the one used to load the workbench in. One may want to load it in a child element 🤔 (we do at CodinGame)

[kaisalmen]

When using the WorkbenchService, the container is the one used to load the workbench in. One may want to load it in a child element 🤔 (we do at CodinGame)

Ok, that means in non-EditorService scenarios, users must specify the htmlContainer no matter if React component is used or not.

[kaisalmen]

@white10205 new next releases are available:
https://www.npmjs.com/package/monaco-languageclient/v/10.3.0-next.1
https://www.npmjs.com/package/@typefox/monaco-editor-react/v/7.3.0-next.1

These versions contain a fix for your problem and it enforces to supply a htmlContainer if ViewsService or WorkbenchService is configured. This was required already if you did not use the React component, but is now required as well.

[kaisalmen]

Final releases are available since yesterday:
https://www.npmjs.com/package/monaco-languageclient/v/10.3.0
https://www.npmjs.com/package/@typefox/monaco-editor-react/v/7.3.0