[MonacoEditorReactComp] python syntax highlighting no longer works after update to 8.0.0

[Stainless2k]

We are using <MonacoEditorReactComp /> with python-lsp-server in our electron app, after the update to 8.0.0 the syntax highlighting stopped working. Everything else works fine. @codingame/monaco-vscode-python-default-extension is in importet aswell. After having a throughout look at the new examples we are not sure what is still missing.

Debug log:

Initializing vscode services. Caller: monaco-editor (16)
Loading service: fileService
Loading service: textFileService
Loading service: filesConfigurationService
Loading service: elevatedFileService
Loading service: labelService
Loading service: configurationService
Loading service: contextService
Loading service: textResourceConfigurationService
Loading service: workspaceEditingService
Loading service: workspacesService
Loading service: textResourcePropertiesService
Loading service: languageService
Loading service: ILanguageStatusService
Loading service: textModelService
Initialization of vscode services completed successfully.
Starting monaco-editor (16)
Init of Classic App was completed.
getWorker: moduleId: workerMain.js label: editorWorkerService
Creating worker: file:///home/leon/Projects/frontend/node_modules/monaco-editor-wrapper/dist/workers/editorWorker-es.js
LanguageClientWrapper status:
LanguageClient: Python Language Server is in a 'Running' state
logger.js:20 languageClientWrapper (Python Language Server): Started successfully``.

UserConfig:

    languageClientConfig: {
      options: {
        name: 'Python Language Server',
        $type: 'WebSocket',
        host: 'localhost',
        port: 9002,
        path: 'python',
        secured: false,
        startOptions: {
          onCall: (languageClient?: MonacoLanguageClient) => {
            languageClient?.sendRequest(
              'workspace/didChangeConfiguration',
              pluginConfig
            );
          },
          reportStatus: true,
        },
      },
      clientOptions: {
        documentSelector: ['python'],
        workspaceFolder: {
          index: 0,
          name: 'workspace',
          uri: URI.file(stepsUrl ?? ''),
        },
      },
    },
    wrapperConfig: {
      serviceConfig: {
        debugLogging: true,
      },
      editorAppConfig: {
        $type: 'classic',
        languageId: 'python',
        useDiffEditor: false,
        code,
      },
    },
  };

[kaisalmen]

Hi @Stainless2k you have to switch to extended mode if you use @codingame/monaco-vscode-python-default-extension. It should work if you change $type: 'classic' to $type: 'extended'.

[kaisalmen]

In extended mode it automatically loads vscode theme support and textmate grammar support

[kaisalmen]

Explained here: https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper/README.md#configuration

[ls-infra]

thanks for the update @kaisalmen , i also have similar issue

i basically just copy paste the https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/src/groovy/client/main.ts#L25 into the https://github.com/TypeFox/monaco-languageclient/blob/main/verify/angular/src/app/app.component.ts#L32 try to make the groovy lsp working in angular.

thanks ,

[Stainless2k]

Hi @Stainless2k you have to switch to extended mode if you use @codingame/monaco-vscode-python-default-extension. It should work if you change $type: 'classic' to $type: 'extended'.

thank you for the quick answer :+1: using extended mode throws some other errors

i tried to use the example nearly 1:1 here, while those errors get thrown, the editor and LSP still work but still no highlighting

import '@codingame/monaco-vscode-python-default-extension';
import { UserConfig } from 'monaco-editor-wrapper';
import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory';
import { MonacoLanguageClient } from 'monaco-languageclient';

import { URI } from 'vscode-uri';

export const configureMonacoWorkers = () => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useWorkerFactory({
    basePath: '../../../node_modules',
  });
};

const pluginConfig = {
  settings: {
    pylsp: {
      plugins: {
        pycodestyle: { ignore: ['W605', 'E501', 'E402', 'E722'] },
      },
    },
  },
};

export const createUserConfig = (code: string): UserConfig => {
  return {
    languageClientConfig: {
      options: {
        name: 'Python Language Server',
        $type: 'WebSocket',
        host: 'localhost',
        port: 9002,
        path: 'python',
        secured: false,
        startOptions: {
          onCall: (languageClient?: MonacoLanguageClient) => {
            languageClient?.sendRequest(
              'workspace/didChangeConfiguration',
              pluginConfig
            );
          },
          reportStatus: true,
        },
      },
      clientOptions: {
        documentSelector: ['python'],
        workspaceFolder: {
          index: 0,
          name: 'workspace',
          uri: URI.file(''),
        },
      },
    },
    wrapperConfig: {
      serviceConfig: {
        debugLogging: true,
      },
      editorAppConfig: {
        $type: 'extended',
        languageId: 'python',
        codeUri: '/workspace/python.py',
        extensions: [
          {
            config: {
              name: 'python-client',
              publisher: 'monaco-languageclient-project',
              version: '1.0.0',
              engines: {
                vscode: '^1.85.0',
              },
              contributes: {
                languages: [
                  {
                    id: 'python',
                    extensions: ['.py', 'pyi'],
                    aliases: ['python'],
                    mimetypes: ['application/python'],
                  },
                ],
              },
            },
          },
        ],
        userConfiguration: {
          json: JSON.stringify({
            'workbench.colorTheme': 'Default Light Modern',
          }),
        },
        useDiffEditor: false,
        code,
      },
    },
  };
};
export default function CodeEditor() {
  /**
   * Code is intentionally incorrect - language server will pick this up on connection and highlight the error
   */
  const code = `def main():
        return pass`;

  const onTextChanged = (text: string, isDirty: boolean) => {
    console.log(`Dirty? ${isDirty} Content: ${text}`);
  };

  return (
    <div style={{ height: '100%', overflow: 'hidden' }}>
      <MonacoEditorReactComp
        userConfig={createUserConfig(code)}
        style={{
          height: '100%',
        }}
        onTextChanged={onTextChanged}
        onLoad={() => {
          console.log('Loaded');
        }}
        onError={(e) => {
          console.error(e);
        }}
      />
    </div>
  );
}

According to the logs some Web-Assembly worker seems to be missing, also our project uses WebPack could this be an issue ?

[kaisalmen]

@Stainless2k have you checked our webpack verification example? Do you see similar problems there? It uses import '@codingame/monaco-vscode-json-default-extension';

[kaisalmen]

@Stainless2k and @ls-infra do you see those problems in this repo when you clone and build it and look at the example with the vite dev server? Have you considered cleaning node_modules and deleting package-lock.json to see there are no old dependency artifacts?

[ls-infra]

@kaisalmen , I just created a minimal reproducible example repo https://github.com/ls-infra/angular-lsp-runner to reproduce the issue. can you please let me know which part i am missing ?

thank you very much ,

[Stainless2k]

@Stainless2k have you checked our webpack verification example? Do you see similar problems there? It uses import '@codingame/monaco-vscode-json-default-extension';

I did check it out, but couldnt find anything of intrest in the webpack config there, since nothing in there seems to care about WebAsm

[Stainless2k]

@Stainless2k and @ls-infra do you see those problems in this repo when you clone and build it and look at the example with the vite dev server? Have you considered cleaning node_modules and deleting package-lock.json to see there are no old dependency artifacts?

this was the first thing I tried aswell, didnt change anything tho. We also use yarn in our project but I dont think that would make a diffrence here

[Stainless2k]

I also tried adding https://github.com/microsoft/vscode-oniguruma to the dependencies since the logs say .../node_modules.asar.unpacked/vscode-oniguruma/release/onig.wasm is missing

[kaisalmen]

@ls-infra is angular 17.3.2 now using vite internally already? I thought this is still experimental That Cannot GET /@fs/T:/projects/monaco-editor/temp/angular-lsp-runner/angluar-lang-client/.angular/cache/17.3.1/vite/deps/resources/light_modern.json is why I am asking. If this is the case you need to activate @CGNonofr plugin in the dev server (not required for production) https://github.com/TypeFox/monaco-languageclient/blob/main/vite.config.ts#L43-L49

@Stainless2k regarding webpack. Do you already use have an asset rule in place?

{
    test: /\.(wasm)$/i,
    type: "asset",
}

[ls-infra]

according to the doc here https://angular.dev/tools/cli/esbuild#vite-as-a-development-server , angular is using it as the dev-server , and it says "currently cannot be directly configured".

and the code here https://github.com/ls-infra/angular-lsp-runner/blob/main/angluar-lang-client/angular.json#L62 generated by the default ng new cmd is indeed using the dev-server when you run ng serve

[kaisalmen]

angular is using it as the dev-server , and it says "currently cannot be directly configured"

Another black box. Btw, did you try if the production build works?

Then custom-webpack currently gives you more options. Can you switch the dev server? Maybe you should ask that in the angular issue board.

[ls-infra]

ok thx, yes after using custom-webpack, it works now. https://github.com/ls-infra/angular-lsp-runner/blob/main/angluar-lang-client/angular.json#L73

i want to try the https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper-react/src/index.tsx#L171 to get the saving working .

but the "model" here https://github.com/ls-infra/angular-lsp-runner/blob/main/angluar-lang-client/src/app/app.component.ts#L33 is undefined. do i miss something to get the edited text back from the editor ?

thank you very much,

[kaisalmen]

One bare monaco-languageclient / monaco-editor example will be available again once https://github.com/TypeFox/monaco-languageclient/pull/624 is merged.

[kaisalmen]

@ls-infra just add your onTextChanged implementation like done here and you get notified on every change. This is already available. Your code above is doing this too early.

[ls-infra]

ok thx, i just got it working, basically i can not use import { startEditor } from 'monaco-languageclient-examples'; directly. instead, i need to port all the .wrapper related code from the react component lifecycle methods https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper-react/src/index.tsx#L21 to a new angular wrapper component https://github.com/ls-infra/angular-lsp-runner/blob/main/angluar-lang-client/src/app/monaco-editor-angular.component.ts

[Stainless2k]

@Stainless2k regarding webpack. Do you already use have an asset rule in place?

{
    test: /\.(wasm)$/i,
    type: "asset",
}

Yes we already use all the usual webpack rules. I noticed that its trying to load .../node_modules.asar.unpacked/vscode-oniguruma/release/onig.wasm while using the devserver (also btw all my problems right now are while using the webpack devserver, should have mentioned that sooner sorry...), so I added a middle ware that changes those request to the normal node_modules folder.

setupMiddlewares(middlewares, devServer) {
  devServer?.app?.get('*.wasm', (req, res, next) => {
    console.log('getting: ', req.url);
    res.sendFile(
      req.url.replace('node_modules.asar.unpacked', 'node_modules'),
      {
        root: webpackPaths.rootPath,
        dotfiles: 'deny',
        headers: {
          'Content-Type': 'application/wasm',
        },
      },
      (err) => {
        if (err) {
          next(err);
        }
      }
    );
  });
}

This now just thorws another error...

At this point this might just be some issue with the setup of the project :shrug:. I will try to get a more minimal electron setup running to see if this is reproducible

[Stainless2k]

So I tried to reproduce with a minimal setup (electorn-boilerplate + @typefox/monaco-editor-react) and after fixing the common issues it just works there... So I just have to double check our webpack config I guess :disappointed:

Sorry for wasting everybody's time here :sweat_smile:

Here a link to that repo : https://github.com/Stainless2k/electorn-monaco-reproduce

[kaisalmen]

Sorry for wasting everybody's time here 😅

That's alright. You found a solution in the process and now can share a repo where it works. 🎉

I think this issue can now be closed. Please do so if you agree.

[Stainless2k]

Well havent found out why it does not work in production yet :cry:, but at least make some progress :+1:

[Stainless2k]

little update, apparently my problem was having "vscode-oniguruma": "^2.0.1", as an explicit dependency in the project. After removing the vscode-oniguruma dependency and adding the middle ware to the webpack devserver it works. Still not sure why the middleware is needed in our project after comparing the webpack configs of our project and the minimal repo :shrug:

[kaisalmen]

After removing the vscode-oniguruma dependency and adding the middle ware to the webpack devserver it works. Still not sure why the middleware is needed in our project after comparing the webpack configs of our project and the minimal repo

Sorry, I don't know.