1

I'm running a project by React, "@codingame/monaco-languageclient": "^0.17.3", "monaco-editor": "^0.31.1" and "react-monaco-editor": "^0.35.0". The compiling gave the following error:

Failed to compile.

./node_modules/vscode-languageclient/lib/common/client.js
Module not found: Can't resolve 'vscode' in '/Users/SoftTimur/10Studio/frontend/node_modules/vscode-languageclient/lib/common'

I found this thread, and there is indeed 'vscode': require.resolve('monaco-languageclient/lib/vscode-compatibility') in webpack.config.js of their example.

I then added 'vscode': require.resolve('@codingame/monaco-languageclient/lib/vscode-compatibility'), to the alias part of node_modules/react-scripts/config/webpack.config.js. It did solve the error.

However, the problem is if I reinstall the project, I have to do this adding again. Does anyone know if there is an automatic way to inject 'vscode': require.resolve('@codingame/monaco-languageclient/lib/vscode-compatibility'), to the alias part of node_modules/react-scripts/config/webpack.config.js?

PS: I'm using react-app-rewired already.

SoftTimur
  • 5,630
  • 38
  • 140
  • 292

1 Answers1

0

The way we solved it. It not really elegant but it works.

You add a dependency called craco:

"@craco/craco": "^6.4.2",

Then you create a config : craco.config.js

const path = require(path);

module.exports = {
    webpack: {
        alias: {
            vscode: "@codingame/monaco-languageclient/lib/vscode-compatibility",
        },
    },
};

Then in package.json you change scripts section as below :

"scripts": {
        "start": "craco start",
        "build": "cracox build",
        "test": "craco test",
        "eject": "craco eject"
    },
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 25 '22 at 09:27