Types missing in monaco editor wrapper

[stagas]

Hello, trying out Langium and stumbled on the following problem:

While trying to use monaco-editor-wrapper by directly importing in a TS frontend project using this command:

import { monaco, MonacoEditorLanguageClientWrapper, vscode } from "monaco-editor-wrapper/bundle";

instead of the tutorial recommended way of copying the dist files, I saw that the types referenced were missing and so I looked it up and it looks like the package is importing monaco-editor here:

https://github.com/TypeFox/monaco-components/blob/4fb07506203a3dd54dc4b5c8520aad8015b72990/packages/monaco-editor-wrapper/src/codeEditorConfig.ts#L1

but because it's missing from the "dependencies" in package.json, the files point to nowhere, so all the types end up as any. Adding the dependency and installing it manually inside the node_modules/monaco-editor-wrapper dir, works just fine, the issue is that doesn't survive a clean npm install.

Regardless, thank you for making Langium, it's such a nice project!

[kaisalmen]

Hi @stagas thank you for reporting this.

Does this problem also occur when you import the-non bundled version for local development, because transitively monaco-editor is there as a dependency (npm list monaco-editor)?

But, yes something that is locally imported should be set in the dependencies. This will be changed in v2 (#19) and the re-export of monaco and vscode will be removed as it was a mistake, IMO.

[stagas]

Ok so I checked again and monaco-editor is indeed in the peerDependencies of vscode:

  "peerDependencies": {
    "monaco-editor": "~0.34.0",
    "vscode-textmate": "^7.0.1",
    "vscode-oniguruma": "^1.6.2"
  },

The problem is these don't install automatically. Either we have to mention that monaco-editor needs to be installed separately (if someone wants to import the wrapper directly, like me) or be placed in the dependencies of some package. I'm unsure what's the right approach in this situation, since it's not necessary for the bundled JS part to work, it's only necessary if you use it in a TS project.

Installing it with npm i monaco-editor --save-dev at my project root fixes the issue as well.

[kaisalmen]

This is interesting. Look at the screenshot below. I have a super simple package.json and perform npm i and it installs all required dependencies. Which npm version do you use? I suspect that different npm version behave differently with regard to peerDependencies but that is just a guess: FYI, I removed the package-lock.json and node_modules beforehand, so only the package.json was there.

[stagas]

Yes, you are correct, this is my mistake. Somehow my global .npmrc had legacy-peer-deps=true which is the directive to not install peer dependencies .. See https://stackoverflow.com/a/66620869/175416

Removing that and doing the install, does install monaco-editor.

Sorry for the trouble!

[kaisalmen]

Sorry for the trouble

No worries. Good you found the root cause.