Monaco editor in react app with language server for python intellisense

Question

I have the python language server running on a port and now need to open a websocket in my react app to talk to the PYLS.

I'm using monaco-languageclient, and this line specifically fails compilation:

MonacoServices.install(editor); //MonacoServices is from monaco-languageclient

Failed to compile.

./node_modules/vscode-languageclient/lib/client.js
Module not found: Can't resolve 'vscode' in '/node_modules/vscode-languageclient/lib'

There shouldn't be a dependency to vscode, right?

This person found a way around it by editing their webpack settings, but to do that, I'd have to eject https://stackoverflow.com/a/56644955/3344422

Is there another way around this?

(I'm using this monaco library so I didn't have to edit my webpack config https://github.com/suren-atoyan/monaco-react#editor-instance )

Have you managed to find a solution? – Gilad Dec 22 '20 at 11:03 — Gilad, Dec 22 '20 at 11:03
Not yet. I've set this aside as I couldn't figure it out. – ladder Dec 31 '20 at 20:39 — ladder, Dec 31 '20 at 20:39

score 0 · Answer 1 · answered Feb 18 '21 at 09:41

You can use customize-cra to edit webpack config without ejecting, and provide it with a config-overrides.js where you package.json lives.

/* config-overrides.js */
const { useBabelRc, override, setWebpackTarget, addWebpackPlugin, addWebpackAlias } = require('customize-cra')

//Monoco support for WebPack mode
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = override(
  setWebpackTarget("electron-renderer"),
  useBabelRc(),
  addWebpackPlugin(new MonacoWebpackPlugin()),
  addWebpackAlias({'vscode': require.resolve('monaco-languageclient/lib/vscode-compatibility')}),
);

Monaco editor in react app with language server for python intellisense

1 Answers1