Strange Unresolved Dependencies To 'vscode' When Wrapping Monaco-editor And Monaco-languageclient As A React Component

I need to create a React component that integrates Microsoft's Monaco editor and monaco-languageclient from TypeFox. The goal is for this component to be able to communicate with a

Solution 1:

I was struggeling with the same problem for hours. Eventually I found the following remark in the changelog of the monaco-languageclient:

• vscode-compatibility should be used as an implementation of vscode module at runtime. To adjust module resolution with webpack:

  resolve: { alias: { 'vscode': require.resolve('monaco-languageclient/lib/vscode-compatibility') } }

After adding that alias to my webpack config (in my case quasar.conf), the compilation succeeded.

So in fact the monaco-languageclient is not dependent on the vscode module as the error messages suggest, instead a compatibility-stub inside ot the package itself should be used.

Solution 2:

It looks like monaco-languageclient has a dependency issue with vscode-base-languageclient, but it's not clear how to solve it. I set up a project with a similar package.json to yours, the issue is specifically with monaco-languageclient (if you comment out that import it compiles fine) Here's the closest issue I could find: https://github.com/theia-ide/theia/issues/2589#issuecomment-414035697

It looks like you built your project with create-react-app, which doesn't have a tsconfig by default. You may be able to add one, or you could set up a new app with create-react-app your-project --typescript to set up a typescript app. You can try the skipLibCheck option he describes, hope it helps!

Solution 3:

Add extra-webpack.config.js with following code

module.exports = {
  "resolve": {
    "alias": {
      'vscode': require.resolve('monaco-languageclient/lib/vscode-compatibility')
    }
  },
  "node": {
    "fs": "empty",
    "global": true,
    "crypto": "empty",
    "tls": "empty",
    "net": "empty",
    "process": true,
    "module": false,
    "clearImmediate": false,
    "setImmediate": true
  },
}

Edit package.json

      "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "angular-monaco-languageclient:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular-monaco-languageclient:build:production"
            }
          }
        },
  

it will remove the errors