search

TypeFox / monaco-languageclient

Repo hosts npm packages for monaco-languageclient, vscode-ws-jsonrpc, monaco-editor-wrapper, @typefox/monaco-editor-react and monaco-languageclient-examples
https://www.npmjs.com/package/monaco-languageclient
MIT License
1.06k stars 179 forks source link

onDidChangeConfiguration is not a function error in both `wrapper-react` and standard use. #709

Open brochington opened 4 months ago

brochington commented 4 months ago

I'm receiving a very similar error to #686:

contextKeyService.js:82 Uncaught (in promise) TypeError: this._configurationService.onDidChangeConfiguration is not a function
    at new ConfigAwareContextValuesContainer (contextKeyService.js:82:1)
    at new ContextKeyService (contextKeyService.js:314:1)
    at InstantiationService._createInstance (instantiationService.js:120:1)
    at InstantiationService._createServiceInstance (instantiationService.js:224:1)
    at InstantiationService._createServiceInstanceWithOwner (instantiationService.js:212:1)
    at InstantiationService._createAndCacheServiceInstance (instantiationService.js:203:1)
    at InstantiationService._safeCreateAndCacheServiceInstance (instantiationService.js:161:1)
    at InstantiationService._getOrCreateServiceInstance (instantiationService.js:147:1)
    at Object.get (instantiationService.js:70:1)
    at lifecycle.js:38:1
ConfigAwareContextValuesContainer @ contextKeyService.js:82
ContextKeyService @ contextKeyService.js:314
_createInstance @ instantiationService.js:120
_createServiceInstance @ instantiationService.js:224
_createServiceInstanceWithOwner @ instantiationService.js:212
_createAndCacheServiceInstance @ instantiationService.js:203
_safeCreateAndCacheServiceInstance @ instantiationService.js:161
_getOrCreateServiceInstance @ instantiationService.js:147
get @ instantiationService.js:70
(anonymous) @ lifecycle.js:38
invokeFunction @ instantiationService.js:77
startup @ lifecycle.js:36
await in startup (async)
commitLayoutEffectOnFiber @ react-dom.development.js:23344
commitLayoutMountEffects_complete @ react-dom.development.js:24727
commitLayoutEffects_begin @ react-dom.development.js:24712
commitLayoutEffects @ react-dom.development.js:24651
commitRootImpl @ react-dom.development.js:26862
commitRoot @ react-dom.development.js:26721
finishConcurrentRender @ react-dom.development.js:26020
performConcurrentWorkOnRoot @ react-dom.development.js:25848
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

Same error occurs when using the wrapper-react as well as a more general approach:

const wrapper = new MonacoEditorLanguageClientWrapper();
await wrapper.init(getMonacoWrapperConfig());

Turning off HMR and liveReload results in the same error.

It's possible that this error is related to the bundler I'm using (rsbuild/rspack), but I've been able to get regular Monaco Editor working mostly out of the box.

I've create a test repro repo. Should just be able to npm install, npm run dev to see the error.

CGNonofr commented 4 months ago

@kaisalmen As always, the issue is multiple package version installed

monaco-editor-wrapper@5.3.1 uses monaco-vscode-api@6.0.3 and you're using @codingame/monaco-vscode-python-default-extension@7.0.5, instead of the 6.0.3

kaisalmen commented 4 months ago

@CGNonofr there must/should occur peerDependeny warnings. I have to check that independently

wangyanci commented 3 months ago

image similar error

image
CGNonofr commented 3 months ago

Did you check for multiple package version installed?

mxvsh commented 2 months ago

i am also getting the same error, i have spent more than 5 hours trying to setup LSP into Monaco editor. Why there isn't any guide, I have tried looking the those examples, they are really confusing.

There are no guide or tutorial or blogs posted recently, all of them are outdated.

mxvsh commented 2 months ago

i am using the same versions listed in the example repository - but still getting the error

Screenshot 2024-09-24 at 17 58 10 
contextKeyService.js:81 Uncaught (in promise) TypeError: this._configurationService.onDidChangeConfiguration is not a function

i only changed these packages because there version was updated

        "monaco-editor-wrapper": "next",
        "monaco-languageclient": "next",
mxvsh commented 2 months ago

here is my package.json

"@codingame/monaco-vscode-keybindings-service-override": "8.0.4",
"@codingame/monaco-vscode-theme-defaults-default-extension": "8.0.4",
"@codingame/monaco-vscode-typescript-basics-default-extension": "8.0.4",
"@codingame/monaco-vscode-typescript-language-features-default-extension": "8.0.4",
"@monaco-editor/react": "^4.6.0",
"@typefox/monaco-editor-react": "next",
"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~8.0.4",
"monaco-editor-wrapper": "next",
"monaco-languageclient": "next",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"vscode": "npm:@codingame/monaco-vscode-api@~8.0.4"
CGNonofr commented 2 months ago

i am also getting the same error, i have spent more than 5 hours trying to setup LSP into Monaco editor. Why there isn't any guide, I have tried looking the those examples, they are really confusing.

There are no guide or tutorial or blogs posted recently, all of them are outdated.

Feel free to make one as soon as you manage to make it work ;)

What is the result of npm list vscode?

mxvsh commented 2 months ago

i am also getting the same error, i have spent more than 5 hours trying to setup LSP into Monaco editor. Why there isn't any guide, I have tried looking the those examples, they are really confusing. There are no guide or tutorial or blogs posted recently, all of them are outdated.

Feel free to make one as soon as you manage to make it work ;)

What is the result of npm list vscode?

sure, i will make a blog on it once i manage to set it up!! šŸ˜ƒ

here is the log file btw of your command-

vscode.log

CGNonofr commented 2 months ago

You have both vscode@npm:@codingame/monaco-vscode-api@4.1.2 and vscode@npm:@codingame/monaco-vscode-api@8.0.4, because of monaco-editor-wrapper@4.2.0-next.0

mxvsh commented 2 months ago

@CGNonofr so what do i do? šŸ˜„

mxvsh commented 2 months ago

@CGNonofr if you have a working code/repository with you, could you please share it with me šŸ˜„

CGNonofr commented 2 months ago

There is a compatibility table

Also you probably shouldn't use the next version since there is a more recent stable version

mxvsh commented 2 months ago

okay, i am trying to make a new project add one by one from that table, and i will let you know

kaisalmen commented 2 months ago

@mxvsh basically do not mix different versions of the same dependency in one project. Have you successfully checked out this repo, build everything and used the examples? The README is quite detailed. Which information is missing / unclear. Enhancement PRs are appreciated.

mxvsh commented 2 months ago
Screenshot 2024-09-24 at 21 09 48

from the table, i believe monaco-editor-react is @monaco-editor/react because monaco-editor-react on npm is outdated (last updated 6 years ago). But when I try to install @monaco-editor/react, I get this error.

This error happened while installing a direct dependency of /Users/monawwar/dev/poc/monaco-editor

The latest release of @monaco-editor/react is "4.6.0".
Other releases are:
  * beta: 4.5.0-beta.0
CGNonofr commented 2 months ago

You're confusing @monaco-editor/react with monaco-editor-react which are 2 different libraries

CGNonofr commented 2 months ago

I think it's @typefox/monaco-editor-react you're looking for, and you've already installed it along with the other one

CGNonofr commented 2 months ago

btw @kaisalmen why is one namespaced and not the other?

kaisalmen commented 2 months ago

@CGNonofr monaco-editor-react was there ages ago and not developed by us. I namespaced @typefox/monaco-editor-react because of that.

kaisalmen commented 2 months ago

I should have done the same with monaco-editor-wrapper

mxvsh commented 2 months ago

@CGNonofr i tried in a completely new project - but still getting that error.

i checked with the table, it all matches with one row.

here is the repository-

https://github.com/mxvsh/monaco-editor-poc

mxvsh commented 2 months ago

here is the log btw npm list vscode

vscode.log

CGNonofr commented 2 months ago

A simple check to the pnpm-lock.yaml shows that you have both 8.0.4 and 9.0.3 versions of monaco-vscode-api

mxvsh commented 2 months ago

@CGNonofr but i just created a new project - how come it installed two different versions?

i am sorry - but can you tell me how to fix it šŸ˜¢

CGNonofr commented 2 months ago

by installing a dependency A directly, and having another dependency B that requires the dependency A with another version

CGNonofr commented 2 months ago

As the compatibility table states, monaco-editor-wrapper@5.5.3 should not be used with v9 of monaco-vscode-api (and all other @codingame packages)

also, you don't need monaco-editor

mxvsh commented 2 months ago

when i run without installing monaco-editor package, i get this error

Screenshot 2024-09-24 at 21 26 13
CGNonofr commented 2 months ago

btw @kaisalmen, having monaco-editor in the compatibility table is quite confusing, it's only for informative purpose and we should probably say that it shouldn't be installed

mxvsh commented 2 months ago 
"dependencies": {
  "@codingame/monaco-vscode-keybindings-service-override": "^9.0.3",
  "@codingame/monaco-vscode-theme-defaults-default-extension": "^9.0.3",
  "@codingame/monaco-vscode-typescript-basics-default-extension": "^9.0.3",
  "@codingame/monaco-vscode-typescript-language-features-default-extension": "^9.0.3",
  "@typefox/monaco-editor-react": "^4.5.3",
  "monaco-editor-wrapper": "5.5.3",
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
},
CGNonofr commented 2 months ago

monaco editor should be installed as an alias to @codingame/monaco-editor-api instead

Which should be the case because it's declared in the dependencies of monaco-editor-wrapper

kaisalmen commented 2 months ago

@mxvsh use 8.0.4 instead of 9.0.3 for all monaco-vscode dependencies. 9.x is not yet supported.

"@codingame/monaco-vscode-keybindings-service-override": "^9.0.3",
mxvsh commented 2 months ago

Thanks! That error is gone with the following dependency -

"dependencies": {
  "@codingame/monaco-vscode-keybindings-service-override": "8.0.4",
  "@codingame/monaco-vscode-theme-defaults-default-extension": "8.0.4",
  "@codingame/monaco-vscode-typescript-basics-default-extension": "8.0.4",
  "@codingame/monaco-vscode-typescript-language-features-default-extension": "8.0.4",
  "@typefox/monaco-editor-react": "^4.5.3",
  "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@8.0.4",
  "monaco-editor-wrapper": "5.5.3",
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
},

but I got another error - šŸ˜­

Screenshot 2024-09-24 at 21 33 21 
Uncaught (in promise) Error: Unable to figure out browser width and height
    at getClientArea (dom.js:315:13)
    at LayoutService.layout (layout.js:352:40)
    at new LayoutService (layout.js:63:14)
    at _InstantiationService._createInstance (instantiationService.js:120:24)
    at instantiationService.js:238:38
kaisalmen commented 2 months ago

@mxvsh please share a repo with your example than we can have a look.

mxvsh commented 2 months ago

@kaisalmen i shared before, i will share it again šŸ˜ƒ

https://github.com/mxvsh/monaco-editor-poc

kaisalmen commented 2 months ago

Sorry, I missed that.

caner-cetin commented 1 month ago

There is a compatibility table

Also you probably shouldn't use the next version since there is a more recent stable version

holy fucking shit both projects needs an AIO package desperately. I have wrote example Python code 1:1, WS connection is alive, all is fine on server, and I get the same error

Uncaught (in promise) TypeError: this._configurationService.onDidChangeConfiguration is not a function

problem is package json is taller than the berlin wall right now, I know there is a version that works (mxvsh s versions doesnt work for me), but looking at compat table and reinstalling all of these is really, really unintiutievevj (forgot the word).

Thanks for this awesome project by the way. It is perfect for everything, and it is perfect when used like a level between monaco, like instead of connecting the lower level Monaco to the LSP and sending all commands by myself, I can just use monaco languageserver library. but I want the whole package like in Python example, and, holy hell, this is worrying me.

edit: mxvsh s versions does not work with either bun, npm, pnpm, everything I throw at this thing refuses to work with same error

https://github.com/TypeFox/monaco-languageclient/issues/686#issuecomment-2185993977

last edit because it is 4 am in the morning, here is my latest dependency tree. I feel like no need for MRP, you can reproduce it in same way with the mxvsh's MRP.

resim

i dont know what is wrong, but I have spent 6 hours on this error. tried almsot all compatible versions.

kaisalmen commented 1 month ago

@mxvsh and @caner-cetin I was busy with other things and then away last week. I will provide feedback this week.

Harry-Drew-CyanBytes commented 1 week ago

I'm getting the same issue. image I'm specifically getting the issue when trying to integrate with React. When I download the example project it works fine: https://github.com/TypeFox/monaco-languageclient but when i try to produce a minimal recreation of just the react part (with a language server) i get the error. Any news or updates on this issue and does anyone have a barebones example of a react implementation (not in a massive mono repo) šŸ˜„

caner-cetin commented 1 week ago

I cant provide help or support, moved onto Ace Editor instead of Monaco and I cant remember what I did. best I can say is check versions of packages, at least package.json and vite config file in main example folder is helpful.