Unable to migrate to Monaco React Editor 7

[AresEkb]

Here is a sample project based on Monaco Editor React 6.12.0: https://github.com/AresEkb/langium-monaco-demo and it works fine.

Trying to migrate it to 7.2.0 https://github.com/AresEkb/langium-monaco-demo/tree/monaco-editor-react-7 without success.

1. If I run the demo bun dev then I get the following error in a browser:

Uncaught Error: Cannot register two commands with the same id: editor.action.measureExtHostLatency
    at registerAction2 (chunk-XFAZYLF6.js?v=06a5b2ef:35455:11)
    at node_modules/@codingame/monaco-vscode-api/node_modules/@codingame/monaco-vscode-extensions-service-override/vscode/src/vs/workbench/services/extensions/common/extensionHostManager.js (chunk-XFAZYLF6.js?v=06a5b2ef:225103:5)
    at __init (chunk-CNP6VNSQ.js?v=06a5b2ef:11:56)
    at node_modules/@codingame/monaco-vscode-api/node_modules/@codingame/monaco-vscode-extensions-service-override/vscode/src/vs/workbench/services/extensions/common/abstractExtensionService.js (chunk-XFAZYLF6.js?v=06a5b2ef:225706:5)
    at __init (chunk-CNP6VNSQ.js?v=06a5b2ef:11:56)
    at node_modules/@codingame/monaco-vscode-api/node_modules/@codingame/monaco-vscode-extensions-service-override/index.js (chunk-XFAZYLF6.js?v=06a5b2ef:304398:5)
    at __init (chunk-CNP6VNSQ.js?v=06a5b2ef:11:56)
    at node_modules/@codingame/monaco-vscode-api/extensions.js (chunk-XFAZYLF6.js?v=06a5b2ef:304748:5)
    at __init (chunk-CNP6VNSQ.js?v=06a5b2ef:11:56)
    at node_modules/vscode/node_modules/@codingame/monaco-vscode-extensions-service-override/index.js (chunk-XFAZYLF6.js?v=06a5b2ef:333805:5)

2. If I build it bun run build then it requires 16 Gb RAM and the resulting bundle is 20x times bigger now. Also you can see that bun.lock is much bigger now

Could you please help two fix these two issues?

[CGNonofr]

The 2 issues are related: you have multiple versions of monaco-vscode-api installed

[AresEkb]

I don't get why... I have the following dependencies related to Monaco:

    "@typefox/monaco-editor-react": "^7.2.0",
    "monaco-editor-wrapper": "^6.12.0",
    "monaco-languageclient": "^10.2.0",

Is it wrong?

I had to add monaco-editor-wrapper and monaco-languageclient because they aren't auto resolved now

[CGNonofr]

I don't know, you can check using npm list @codingame/monaco-vscode-api

[AresEkb]

Thanks! I shouldn't use monaco-editor-wrapper, it's outdated. monaco-languageclient is enough.

But now I've got another issue during build:

[vite]: Rollup failed to resolve import "vscode" from ".../langium-monaco-demo/node_modules/monaco-languageclient/lib/vscode/apiWrapper.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

And later the same for vscode/localExtensionHost.

If I add them to build.rollupOptions.external the build is finished successfully. But when I ran the application I get the following error anyways:

✘ [ERROR] Could not resolve "vscode"

    node_modules/monaco-languageclient/lib/editorApp/editorApp.js:10:24:
      10 │ import * as vscode from 'vscode';
         ╵                         ~~~~~~~~

  You can mark the path "vscode" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle.

Could you please help to fix it?

[CGNonofr]

is @codingame/monaco-vscode-extension-api installed as vscode?

[AresEkb]

Thanks! I added the following dependency to package.json:

"vscode": "npm:@codingame/monaco-vscode-extension-api@^22.1.0"

And it builds and runs now