Unable to Run Basic React Setup with @typefox/monaco-editor-react and monaco-languageclient

[pratham-devappsys]

Here is a clean, professional GitHub issue you can copy and paste:

---

Unable to Run Basic React Setup with @typefox/monaco-editor-react and monaco-languageclient

Hello,

I am trying to create a minimal React application using @typefox/monaco-editor-react together with monaco-languageclient, but I am unable to run even a simple example.

Description

I created a React application using Create React App and installed the required dependencies. However, the editor does not run properly, and I encounter build/runtime issues when trying to render a basic Monaco editor component with a language client configuration.

Below is the minimal code I am using:

import * as vscode from 'vscode';
import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
import type { MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
import type { LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
import type { EditorAppConfig } from 'monaco-languageclient/editorApp';
import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
import React from 'react';
import ReactDOM from 'react-dom/client';

export const createEditorAndLanguageClient = async () => {
    const languageId = 'mylang';
    const code = '// initial editor content';
    const codeUri = '/workspace/hello.mylang';

    const vscodeApiConfig: MonacoVscodeApiConfig = {
        $type: 'extended',
        viewsConfig: {
            $type: 'EditorService'
        },
        userConfiguration: {
            json: JSON.stringify({
                'workbench.colorTheme': 'Default Dark Modern',
                'editor.wordBasedSuggestions': 'off'
            })
        },
        monacoWorkerFactory: configureDefaultWorkerFactory
    };

    const languageClientConfig: LanguageClientConfig = {
        languageId,
        connection: {
            options: {
                $type: 'WebSocketUrl',
                url: 'ws://localhost:30000/myLangLS'
            }
        },
        clientOptions: {
            documentSelector: [languageId],
            workspaceFolder: {
                index: 0,
                name: 'workspace',
                uri: vscode.Uri.file('/workspace')
            }
        }
    };

    const editorAppConfig: EditorAppConfig = {
        codeResources: {
            main: {
                text: code,
                uri: codeUri
            }
        }
    };

    const root = ReactDOM.createRoot(document.getElementById('react-root')!);
    const App = () => {
        return (
            <div style={{ backgroundColor: '#1f1f1f' }}>
                <MonacoEditorReactComp
                    vscodeApiConfig={vscodeApiConfig}
                    editorAppConfig={editorAppConfig}
                    languageClientConfig={languageClientConfig}
                    style={{ height: '100%' }}
                    onError={(e) => console.error(e)}
                />
            </div>
        );
    };

    root.render(<App />);
};

createEditorAndLanguageClient();

package.json (relevant dependencies)

{
  "dependencies": {
    "@typefox/monaco-editor-react": "~7.7.0",
    "monaco-languageclient": "^10.7.0",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "vscode": "npm:@codingame/monaco-vscode-extension-api@^26.0.1",
    "vscode-languageclient": "~9.0.1",
    "vscode-languageserver": "~9.0.1"
  }
}

Environment

• React 19
• react-scripts 5.0.1 (Create React App)
• monaco-languageclient 10.7.0
• Node.js 24.13.0
• Windows 11

Issues Observed

• Build errors related to resolving vscode
• High memory usage during development
• Runtime failures when initializing the language client

Questions

1. Is Create React App officially supported for this setup?
2. Are vscode-languageclient and vscode-languageserver required in a browser-based React setup?
3. Is there a minimal working example repository for React + @typefox/monaco-editor-react + monaco-languageclient?
4. Is Vite recommended instead of Create React App?

I would appreciate guidance on the correct minimal configuration for a basic React + Monaco + Language Client setup.

Thank you.

[kaisalmen]

Hi @pratham-devappsys have you tried the examples in this repository?
https://github.com/TypeFox/monaco-languageclient#main-examples

There is even a next.js verification example:
https://github.com/TypeFox/monaco-languageclient/tree/main/verify/next

The ones not requiring a backend you can play with directly:
https://typefox.dev/monaco-languageclient/ghp_react_statemachine.html

Create react app is not required or recommended.