{"id":13484953,"url":"https://github.com/TypeFox/monaco-languageclient","last_synced_at":"2025-03-27T16:31:43.656Z","repository":{"id":37396838,"uuid":"88019063","full_name":"TypeFox/monaco-languageclient","owner":"TypeFox","description":"Repo hosts npm packages for monaco-languageclient, vscode-ws-jsonrpc, monaco-editor-wrapper, @typefox/monaco-editor-react and monaco-languageclient-examples","archived":false,"fork":false,"pushed_at":"2024-10-29T08:49:35.000Z","size":4427,"stargazers_count":1056,"open_issues_count":19,"forks_count":177,"subscribers_count":20,"default_branch":"main","last_synced_at":"2024-10-29T09:40:12.997Z","etag":null,"topics":["language-server","language-server-protocol","lsp","monaco","monaco-editor","vscode"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/monaco-languageclient","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TypeFox.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"TypeFox"}},"created_at":"2017-04-12T06:46:51.000Z","updated_at":"2024-10-24T07:07:26.000Z","dependencies_parsed_at":"2023-10-12T00:33:02.747Z","dependency_job_id":"a76dabdb-e278-434e-9ba9-e370324c5a51","html_url":"https://github.com/TypeFox/monaco-languageclient","commit_stats":{"total_commits":716,"total_committers":47,"mean_commits":15.23404255319149,"dds":0.4594972067039106,"last_synced_commit":"bb6d615e7a7d1fe5c08d5f51abadad17131a11dd"},"previous_names":[],"tags_count":163,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TypeFox%2Fmonaco-languageclient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TypeFox%2Fmonaco-languageclient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TypeFox%2Fmonaco-languageclient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TypeFox%2Fmonaco-languageclient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TypeFox","download_url":"https://codeload.github.com/TypeFox/monaco-languageclient/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237743724,"owners_count":19359289,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["language-server","language-server-protocol","lsp","monaco","monaco-editor","vscode"],"created_at":"2024-07-31T17:01:40.107Z","updated_at":"2025-03-27T16:31:43.649Z","avatar_url":"https://github.com/TypeFox.png","language":"TypeScript","readme":"# Monaco Language Client, VSCode WebSocket Json RPC, Monaco-Editor-Wrapper, Monaco-Editor-React and examples\n\n[![Github Pages](https://img.shields.io/badge/GitHub-Pages-blue?logo=github)](https://typefox.github.io/monaco-languageclient)\n[![monaco-languageclient](https://github.com/TypeFox/monaco-languageclient/actions/workflows/actions.yml/badge.svg)](https://github.com/TypeFox/monaco-languageclient/actions/workflows/actions.yml)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?longCache=true)](https://github.com/TypeFox/monaco-languageclient/labels/help%20wanted)\n[![Gitpod - Code Now](https://img.shields.io/badge/Gitpod-code%20now-blue.svg?longCache=true)](https://gitpod.io#https://github.com/TypeFox/monaco-languageclient)\n\u003cbr\u003e\n[![monaco-languageclient Version](https://img.shields.io/npm/v/monaco-languageclient?logo=npm\u0026label=monaco-languageclient)](https://www.npmjs.com/package/monaco-languageclient)\n[![monaco-languageclient Downloads](https://img.shields.io/npm/dt/monaco-languageclient)](https://www.npmjs.com/package/monaco-languageclient)\n[![vscode-ws-jsonrpc Version](https://img.shields.io/npm/v/vscode-ws-jsonrpc?logo=npm\u0026label=vscode-ws-jsonrpc)](https://www.npmjs.com/package/vscode-ws-jsonrpc)\n[![vscode-ws-jsonrpc Downloads](https://img.shields.io/npm/dt/vscode-ws-jsonrpc)](https://www.npmjs.com/package/vscode-ws-jsonrpc)\n[![monaco-editor-wrapper Version](https://img.shields.io/npm/v/monaco-editor-wrapper?logo=npm\u0026label=monaco-editor-wrapper)](https://www.npmjs.com/package/monaco-editor-wrapper)\n[![monaco-editor-wrapper Downloads](https://img.shields.io/npm/dt/monaco-editor-wrapper)](https://www.npmjs.com/package/monaco-editor-wrapper)\n[![monaco-editor-react Version](https://img.shields.io/npm/v/@typefox/monaco-editor-react?logo=npm\u0026label=@typefox/monaco-editor-react)](https://www.npmjs.com/package/@typefox/monaco-editor-react)\n[![monaco-editor-react Downloads](https://img.shields.io/npm/dt/@typefox/monaco-editor-react)](https://www.npmjs.com/package/@typefox/monaco-editor-react)\n\nThis repository now host multiple npm packages under one roof:\n\n- [monaco-languageclient](https://www.npmjs.com/package/monaco-languageclient) to connect [Monaco editor](https://microsoft.github.io/monaco-editor/) with [language servers](https://microsoft.github.io/language-server-protocol/).\n- [vscode-ws-jsonrpc](https://www.npmjs.com/package/vscode-ws-jsonrpc) which implements communication between a jsonrpc client and server over WebSocket.\n- [monaco-editor-wrapper](https://www.npmjs.com/package/monaco-editor-wrapper) for building monaco editor application driven by configuration\n- [monaco-editor-react](https://www.npmjs.com/package/@typefox/monaco-editor-react) puts a react cloack over `monaco-editor-wrapper`\n- [monaco-languageclient-examples](https://www.npmjs.com/package/monaco-languageclient-examples) provides the examples which allows to use them externally.\n\nThe examples not requiring a backend are now available [via GitHub Pages](https://typefox.github.io/monaco-languageclient).\u003cbr\u003e\n\n- [Monaco Language Client, VSCode WebSocket Json RPC, Monaco-Editor-Wrapper, Monaco-Editor-React and examples](#monaco-language-client-vscode-websocket-json-rpc-monaco-editor-wrapper-monaco-editor-react-and-examples)\n  - [Changelogs, project history and compatibility](#changelogs-project-history-and-compatibility)\n  - [Getting started](#getting-started)\n    - [Vite dev server](#vite-dev-server)\n  - [Usage](#usage)\n  - [Examples Overview](#examples-overview)\n    - [Main Examples](#main-examples)\n      - [JSON Language client and language server example (Location)](#json-language-client-and-language-server-example-location)\n      - [Python Language client and pyright language server example (Location)](#python-language-client-and-pyright-language-server-example-location)\n      - [Groovy Language client and language server example (Location)](#groovy-language-client-and-language-server-example-location)\n      - [Java Language client and language server example (Location)](#java-language-client-and-language-server-example-location)\n      - [Cpp / Clangd (Location)](#cpp--clangd-location)\n      - [Application Playground (Location)](#application-playground-location)\n      - [Langium grammar DSL (Location)](#langium-grammar-dsl-location)\n      - [Statemachine DSL (created with Langium) (Location)](#statemachine-dsl-created-with-langium-location)\n      - [bare monaco-languageclient (Location)](#bare-monaco-languageclient-location)\n      - [Browser example (Location)](#browser-example-location)\n      - [Purely monaco-editor related examples](#purely-monaco-editor-related-examples)\n      - [Server processes](#server-processes)\n        - [JSON Language Server](#json-language-server)\n        - [Pyright Language Server](#pyright-language-server)\n        - [Graalpy Debugger](#graalpy-debugger)\n        - [Groovy Language Server](#groovy-language-server)\n        - [Java Language Server](#java-language-server)\n    - [Verification Examples \\\u0026 Usage](#verification-examples--usage)\n    - [VSCode integration](#vscode-integration)\n  - [Featured projects](#featured-projects)\n  - [Troubleshooting](#troubleshooting)\n    - [General](#general)\n    - [@codingame/monaco-vscode-editor-api / monaco-editor usage](#codingamemonaco-vscode-editor-api--monaco-editor-usage)\n    - [Dependency issues: monaco-editor / @codingame/monaco-vscode-api / @codingame/monaco-vscode-editor-api](#dependency-issues-monaco-editor--codingamemonaco-vscode-api--codingamemonaco-vscode-editor-api)\n    - [Volta](#volta)\n    - [Vite dev server troubleshooting](#vite-dev-server-troubleshooting)\n    - [SSR frameworks](#ssr-frameworks)\n    - [Serve all files required](#serve-all-files-required)\n    - [Bad Polyfills](#bad-polyfills)\n      - [buffer](#buffer)\n    - [monaco-editor and react](#monaco-editor-and-react)\n  - [Licenses](#licenses)\n\n## Changelogs, project history and compatibility\n\nCHANGELOGs for each project are available from the linked location:\n\n- CHANGELOG for `monaco-languageclient` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/client/CHANGELOG.md)\n- CHANGELOG for `vscode-ws-jsonrpc` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/vscode-ws-jsonrpc/CHANGELOG.md)\n- CHANGELOG for `monaco-editor-wrapper` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper/CHANGELOG.md)\n- CHANGELOG for `@typefox/monaco-editor-react` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper-react/CHANGELOG.md)\n- CHANGELOG for `monaco-languageclient-examples` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/CHANGELOG.md)\n\nImportant Project changes and notes about the project's history are found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/docs/versions-and-history.md#important-project-changes).\n\nYou find the `monaco-editor`, `vscode`, `@codingame/monaco-vscode-api` and `@codingame/monaco-vscode-editor-api` compatibility table [here](https://github.com/TypeFox/monaco-languageclient/blob/main/docs/versions-and-history.md#monaco-editor--codingamemonaco-vscode-api-compatibility-table).\n\n[This article](https://www.typefox.io/blog/teaching-the-language-server-protocol-to-microsofts-monaco-editor/) describes the initial motivation for starting monaco-languageclient.\n\n## Getting started\n\nOn your local machine you can prepare your dev environment as follows. At first it is advised to build everything. Or, use a fresh dev environment in [Gitpod](https://www.gitpod.io) by pressing the **code now** badge above.\nLocally, from a terminal do:\n\n```bash\ngit clone https://github.com/TypeFox/monaco-languageclient.git\ncd monaco-languageclient\nnpm i\n# Cleans-up, compiles and builds everything\nnpm run build\n```\n\n### Vite dev server\n\nStart the Vite dev server. It serves all client code at [localhost](http://localhost:20001). You can go to the [index.html](http://localhost:20001/index.html) and navigate to all client examples from there. You can edit the client example code directly (TypeScript) and Vite ensures it automatically made available:\n\n```shell\nnpm run dev\n# OR: this clears the cache and has debug output\nnpm run dev:debug\n```\n\nAs this is a npm workspace the main [package.json](./package.json) contains script entries applicable to the whole workspace like `watch`, `build` and `lint`, but it also contains shortcuts for launching scripts from the childe packages like `npm run build:examples`.\n\nIf you want to change the libries and see this reflected directly, then you need to run the watch command that compiles all TypeScript files form both libraries and the examples:\n\n```shell\nnpm run watch\n```\n\n## Usage\n\nPlease look at the respective section in the packages:\n\n- Usage for `monaco-languageclient` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/client/README.md#usage)\n- Usage for `vscode-ws-jsonrpc` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/vscode-ws-jsonrpc/README.md#usage)\n- Usage for `monaco-editor-wrapper` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper/README.md#usage)\n- Usage for `@typefox/monaco-editor-react` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper-react/README.md#usage)\n\n## Examples Overview\n\nThe examples demonstrate mutliple things:\n\n- How `monaco-languageclient` is use by `monaco-edtior-wrapper` or `@typefox/monaco-editor-react` to have an editor that is connected to a language server either running in the browser in a web worker or `vscode-ws-jsonrpc`. is used to an external process via web-socket.\n- How different language servers can be intergrated in a common way, so they can communicate via web-socket to the front-end running in the browser.\n\n### Main Examples\n\n#### JSON Language client and language server example ([Location](./packages/examples/src/json))\n\nThe **json-server** runs an external Node.js [Express app](./packages/examples/src/json/server/main.ts) where web sockets are used to enable communication between the language server process and the client web application (see [JSON Language Server](#json-language-server)).\nThe **json-client** contains the [monaco-editor-wrapper app](./packages/examples/src/json/client/wrapperWs.ts) which connects to the language server and therefore requires the node server app to be run in parallel.\n\n#### Python Language client and pyright language server example ([Location](./packages/examples/src/python))\n\nThe **python-server** runs an external Node.js [Express app](./packages/examples/src/python/server/main.ts) where web sockets are used to enable communication between the language server process and the client web application (see [Pyright Language Server](#pyright-language-server)).\nThe **python-client** contains the [monaco-editor-wrapper app](./packages/examples/src/python/client/main.ts) which connects to the language server and therefore requires the node server app to be run in parallel.\n   It is also possible to use a [@typefox/monaco-editor-react app](./packages/examples/src/python/client/reactPython.tsx) to connect to the server. Both versions now feature a debugger, see [here](#graalpy-debugger).\n\n#### Groovy Language client and language server example ([Location](./packages/examples/src/groovy))\n\nThe **groovy-server** runs an external [Java app](./packages/examples/src/groovy/server/main.ts) where web sockets are used to enable communication between the language server process and the client web application ([Groovy Language Server](#groovy-language-server)).\nThe **groovy-client** contains the [monaco-editor-wrapper app](./packages/examples/src/groovy/client/main.ts) which connects to the language server and therefore requires the node server app to be run in parallel.\n\n#### Java Language client and language server example ([Location](./packages/examples/src/eclipse.jdt.ls))\n\nThe **java-server** runs an external [Java app](./packages/examples/src/eclipse.jdt.ls/server/main.ts) where web sockets are used to enable communication between the language server process and the client web application ([Java Language Server](#java-language-server)).\nThe **java-client** contains the [monaco-editor-wrapper app](./packages/examples/src/eclipse.jdt.ls/client/main.ts) which connects to the language server and therefore requires the node server app to be run in parallel.\n\nLangium examples (here client and server communicate via `vscode-languageserver-protocol/browser` instead of a web socket used in the three examples above\n\n#### Cpp / Clangd ([Location](./packages/examples/src/clangd))\n\nIt contains both the [language client](./packages/examples/src/clangd/client/main.ts) and the [langauge server (web worker)](./packages/examples/src/clangd/worker/clangd-server.ts). The clangd language server is compiled to wasm so it can be executed in the browser. \u003cb\u003eHeads up:\u003c/b\u003e This is a prototype and still evolving.\n\n#### Application Playground ([Location](./packages/examples/src/appPlayground))\n\nThis [example](./packages/examples/src/appPlayground/main.ts) uses the view service provider from `@codingame/monaco-vscode-editor-api` to build an application that utilizes more vscode features. \u003cb\u003eHeads up:\u003c/b\u003e This is a prototype and still evolving.\n\n#### Langium grammar DSL ([Location](./packages/examples/src/langium/langium-dsl))\n\nIt contains both the [language client](./packages/examples/src/langium/langium-dsl/wrapperLangium.ts) and the [langauge server (web worker)](./packages/examples/src/langium/langium-dsl/worker/langium-server.ts). Here you can chose beforehand if the wrapper should be started in classic or extended mode.\n\n#### Statemachine DSL (created with Langium) ([Location](./packages/examples/src/langium/statemachine))\n\nIt contains both the [language client](./packages/examples/src/langium/statemachine/main.ts) and the [langauge server (web worker)](./packages/examples/src/langium/statemachine/worker/statemachine-server.ts).\nIt is also possible to use a [@typefox/monaco-editor-react app](./packages/examples/src/langium/statemachine/main-react.tsx) to connect to the server.\n\n#### bare monaco-languageclient ([Location](./packages/examples/src/bare))\n\nIt demostrate how the `JSON Language client and language server example` can be realised without `monaco-editor-wrapper`. You find the implementation [here](./packages/examples/src/bare/client.ts).\n\n#### Browser example ([Location](./packages/examples/src/browser))\n\nIt demonstrates how a [monaco-editor-wrapper can be combined with a language service written in JavaScript](./packages/examples/src/browser/main.ts). This example can now be considered legacy as the web worker option eases client side language server implementation and separation, but it still shows a valid way to achieve the desired outcome.\n\n#### Purely monaco-editor related examples\n\nSee [Typescript Language support](./packages/examples/src/ts/wrapperTs.ts).\n\n#### Server processes\n\n##### JSON Language Server\n\nFor the **json-client**, **react-client** or the **client-webpack** examples you need to ensure the **json-server** example is running:\n\n```shell\n# start the express server with the language server running in the same process.\nnpm run start:example:server:json\n```\n\n##### Pyright Language Server\n\nFor the **python-client** example you need to ensure the **python-server** example is running:\n\n```shell\n# start the express server with the language server running as external node process.\nnpm run start:example:server:python\n```\n\n##### Graalpy Debugger\n\nIf you want to use the debugger in the **python-client** example you need to the debugger is running. You require **docker-compose** to run it. From the project root run `docker-compose -f ./packages/examples/resources/debugger/docker-compose.yml up -d`. First start up will take longer as the container is downloaded from GitHub's container registry. Use `docker-compose -f ./packages/examples/resources/debugger/docker-compose.yml down` to stop it.\n\n##### Groovy Language Server\n\nFor the **groovy-client** example you need to ensure the **groovy-server** example is running. You require **docker-compose** which does not require any manual setup (OpenJDK / Gradle). From the project root run `docker-compose -f ./packages/examples/resources/groovy/docker-compose.yml up -d`. First start up will take longer as the container is downloaded from GitHub's container registry. Use `docker-compose -f ./packages/examples/resources/groovy/docker-compose.yml down` to stop it.\n\n##### Java Language Server\n\nFor the **java-client** example you need to ensure the **java-server** example is running. You require **docker-compose** which does not require any manual setup (OpenJDK / Eclipse JDT LS). From the project root run `docker-compose -f ./packages/examples/resources/eclipse.jdt.ls/docker-compose.yml up -d`. First start up will take longer as the container is downloaded from GitHub's container registry. Use `docker-compose -f ./packages/examples/resources/eclipse.jdt.ls/docker-compose.yml down` to stop it.\n\n### Verification Examples \u0026 Usage\n\nNone of the verification examples is part of the npm workspace. Some bring substantial amount of npm dependencies that pollute the main node_modules dependencies and therefore these examples need to be build and started independently. All verifaction examples re-uses the code form the json client example and therefore require the json server to be started.\n\n- [Angular verification example](./verify/angular): Before March 2024 this was located in [a separate repository](https://github.com/TypeFox/monaco-languageclient-ng-example). If you want to test it, Please do: `cd verify/angular \u0026\u0026 npm run verify`. It serves the client here: \u003chttp://localhost:4200\u003e.\n\n- [Next.js verification example](./verify/next): demonstrates how to use `@typefox/monaco-editor-react` with Next.js, Please do: `cd verify/next \u0026\u0026 npm run verify`. It serves the client here: \u003chttp://localhost:8081\u003e.\n\n- [webpack verification example](./verify/webpack) demonstrates how bundling can be achieved with webpack. You find the configuration here: [webpack.config.js](./verify/webpack/webpack.config.js). Please do: `cd verify/webpack \u0026\u0026 npm run verify`. It serves the client here: \u003chttp://localhost:8082\u003e.\n\n- [vite verification example](./verify/vite) demonstrates how bundling can be achieved with vite. There is no configuration required Please do: `cd verify/vite \u0026\u0026 npm run verify`. It serves the client here: \u003chttp://localhost:8083\u003e.\n\n### VSCode integration\n\nYou can as well run [vscode tasks](./.vscode/launch.json) to start and debug the server in different modes and the client.\n\n## Featured projects\n\n- JSONA Editor: [Showcase](https://jsona.github.io/editor/schema) ([GitHub](https://github.com/jsona/editor))\n- Clangd in Browser: [Showcase](https://clangd.guyutongxue.site/) ([GitHub](https://github.com/Guyutongxue/clangd-in-browser))\n- Langium minilogo using monaco-editor-wrapper: [Showcase](https://langium.org/showcase/minilogo/) ([GitHub](https://github.com/TypeFox/monaco-components))\n\n## Troubleshooting\n\n### General\n\nWhenever you used `monaco-editor`/`@codingame/monaco-vscode-editor-api` `vscode`/`@codingame/monaco-vscode-extension-api`, `monaco-languageclient`, `monaco-editor-wrapper` or `@typefox/monaco-editor-react` ensure they are imported before you do any `monaco-editor` or `vscode` api related intialization work or start using it.\n\nIf you use pnpm or yarn, you have to add `vscode` / `@codingame/monaco-vscode-api` as direct dependency, otherwise the installation will fail:\n\n```json\n\"vscode\": \"npm:@codingame/monaco-vscode-extension-api@~15.0.2\"\n```\n\n### @codingame/monaco-vscode-editor-api / monaco-editor usage\n\nWhen you use the libraries from this project you are no longer are required to proxy `monaco-editor` like `\"monaco-editor\": \"npm:@codingame/monaco-vscode-editor-api@~15.0.2\"` in you `package.json`. You can directly use it like this:\n\n```js\nimport * as monaco from '@codingame/monaco-vscode-editor-api';\n```\n\nIf your dependency stack already contains a reference `monaco-editor` you must enforce the correct reference to `@codingame/monaco-vscode-editor-api` or you will have problems with mismatching code. Use`overrides` (npm/pnpm) or `resolutions` (yarn) to do so:\n\n```json\n\"overrides\": {\n  \"monaco-editor\": \"npm:@codingame/monaco-vscode-editor-api@~15.0.2\"\n}\n```\n\n### Dependency issues: monaco-editor / @codingame/monaco-vscode-api / @codingame/monaco-vscode-editor-api\n\nIf you have mutiple, possibly hundreds of compile errors resulting from missing functions deep in `monaco-editor` or `vscode` then it is very likely you have a mismatching dependency definition somewhere in your dependency definitions:\n\n1. Use `npm list @codingame/monaco-vscode-api` to see if there are two different versions are listed in the dependency tree.\n2. If you see a message in the browser console starting with `Another version of monaco-vscode-api has already been loaded. Trying to load` then definetly a version mismatch was detected by `@codingame/monaco-vscode-api`. This error is reported since v14.\n\nIf one of the two is true, fix you dependencies, remove `package-lock.json` and `node_modules` and perform a fresh `npm install`.\n\n### Volta\n\nThere are [Volta](https://volta.sh/) instructions in the `package.json` files. When you have Volta available it will ensure the exactly specified `node` and `npm` versions are used.\n\n### Vite dev server troubleshooting\n\nWhen you are using the vite dev server there are some issues with imports, please [read this recommendation](https://github.com/CodinGame/monaco-vscode-api/wiki/Troubleshooting#if-you-use-vite).\n\nIf you see the problem *Assertion failed (There is already an extension with this id)* you likely have mismatching dependencies defined for `vscode` / `@codingame/monaco-vscode-extension-api`. You should fix this or add the following entry to your vite config:\n\n```javascript\nresolve: {\n  dedupe: ['vscode']\n}\n```\n\n### SSR frameworks\n\n**Important:** Due to its reliance on `@codingame/monaco-vscode-api` this stack will not directly work with Server-Side Rendering (SSR) frameworks like Next.js. They client code has to be run in a browser environment. Take a look at the [Next.js verification example](./verify/next) to see how to dynamically load the code.\n\n### Serve all files required\n\n `@codingame/monaco-vscode-api` requires json and other files to be served. In your project's web-server configuration you have to ensure you don't prevent this.\n\n### Bad Polyfills\n\n#### buffer\n\nIf you see an error similar to the one below:\n\n```yaml\nUncaught Error: Unexpected non—whitespace character after JSON at position 2\n\nSyntaxError: Unexpected non—whitespace character after JSON at position 2\n    at JSON. parse («anonymous\u003e)\n```\n\nIt is very likely you have an old version of `buffer` interfering (see [#538](https://github.com/TypeFox/monaco-languageclient/issues/538) and [#546](https://github.com/TypeFox/monaco-languageclient/issues/546)). You can enforce a current version by adding a `resolution` as shown below to your projects' `package.json`.\n\n```yaml\n\"resolutions\": {\n  \"buffer\": \"~6.0.3\",\n}\n```\n\n### monaco-editor and react\n\nWe recommend you now use `typefox/monaco-editor-react`.\n\nBut if you need to use `@monaco-editor/react`, then add the `monaco-editor` import at the top of your editor component file [source](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package):\n\n```javascript\nimport * as monaco from \"monaco-editor\";\nimport { loader } from \"@monaco-editor/react\";\n\nloader.config({ monaco });\n```\n\n## Licenses\n\n- monaco-languageclient: [MIT](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/client/LICENSE)\n- vscode-ws-jsonrpc: [MIT](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/vscode-ws-jsonrpc/LICENSE)\n- monaco-editor-wrapper: [MIT](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper/LICENSE)\n- @typefox/monaco-editor-react: [MIT](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper-react/LICENSE)\n- monaco-languageclient-examples: [MIT](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/LICENSE)\n","funding_links":["https://github.com/sponsors/TypeFox"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTypeFox%2Fmonaco-languageclient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTypeFox%2Fmonaco-languageclient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTypeFox%2Fmonaco-languageclient/lists"}