Improve the example to demonstrate usage of react-monaco-editor

[sshumakov]

Hello, I am following your tutorial to setup monaco editor + language client/server in react based app.

I use react monaco editor package + typescript + webpack and it works great.

When import language client, it fails due to multiple reasons during import.

import {
BaseLanguageClient, CloseAction, ErrorAction,
createMonacoServices, createConnection
} from 'monaco-languageclient';

1. Cannot find module vscode-languageserver-types:

services.js - __export(require("vscode-languageserver-types"));

2. Uncaught ReferenceError: monaco is not defined:

diagnostic-collection.js - var Uri = monaco.Uri;

In your example, I see that you used webpack and marked main.js loader as entry:

entry: path.resolve(buildRoot, "main.js"),

main.js:

window.onload = () => {
    const w = <any>window;
    // load Monaco code
    w.require(['vs/editor/editor.main'], () => {
        // load client code
        require('./client');
    });
};

Can it be that main.js and way you initialize monaco editor is the reason why it works? Is it possible to pass monaco editor as dependency to language client instead of using globally defined "monaco" variable?

[akosyakov]

Yes, it is probably a reason. Have you tried to use require('monaco-languageclient') instead of import from editorWillMount callback?

[sshumakov]

Yes, tried to import it like that:

import LanguageClient = require('monaco-languageclient')

Afterwards, I even tried to modify bootstrap of app:

Before

    ReactDOM.render(
        <AppContainer>
            <BrowserRouter children={ routes } />
        </AppContainer>,
        document.getElementById('react-app')
    );

After

    window.onload = () => {
        const w = window as any;
        // load Monaco code
        require(['vs/editor/editor.main'], () => {
            // load client code
            ReactDOM.render(
                <AppContainer>
                    <BrowserRouter children={routes} />
                </AppContainer>,
                document.getElementById('react-app')
            );
        });
    };

Now it fails with new error:

bootstrap 3076785…:780 Error: define cannot be used indirect
    at webpackJsonp.210.module.exports (amd-define.js:2)
    at Object.<anonymous> (editor.main.js:564)
    at Object.<anonymous> (editor.main.js:87857)
    at Object.209 (editor.main.js:87858)
    at __webpack_require__ (bootstrap 3076785…:686)
    at fn (bootstrap 3076785…:109)
    at boot.tsx:17
    at <anonymous>

This seems like an issue with loading monaco editor itself.

Part of webpack which defines alias for vs:

        resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'],
            alias: {
                'vs': path.resolve('node_modules/monaco-editor-core/dev/vs')
            }
        }

[sshumakov]

Updated editor to "monaco-editor": "0.9.0". Seems that it is incompatible:

ERROR in [at-loader] ./node_modules/monaco-languageclient/lib/workspace.d.ts:15:83
TS2694: Namespace 'monaco.editor' has no exported member 'IModelContentChangedEvent2'.

[akosyakov]

@sshumakov Error: define cannot be used indirect could be another issue with loading AMD modules with webpack. Do you have noParse section as here https://github.com/TypeFox/monaco-languageclient/blob/master/example/webpack.config.js#L13? It will be interesting to know for which module you get it.

[akosyakov]

thx for reporting the issue with the latest monaco

[sshumakov]

Yes, I have noParse section:

        module: {
            rules: [
                { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ],
            noParse: /vscode-languageserver-types/
        },

It seems that it fails on define('vs/base/browser/iframe'):

define(__m[157/*vs/base/browser/iframe*/], __M([0/*require*/,1/*exports*/]), function (require, exports) {

Screenshot 1
Screenshot 2

[sshumakov]

Is it possible to change monaco-languageclient to not rely on global monaco variable defined and use passed variable instead? With usage of react-monaco-editor, I can render editor and get reference to it without any issues.

[akosyakov]

Do you have vs alias in webpack config as here https://github.com/TypeFox/monaco-languageclient/blob/master/example/webpack.config.js#L19?

Is it possible to change monaco-languageclient to not rely on global monaco variable defined and use passed variable instead?

I will see how it can be done without breaking other clients. Unfortunately, right now I am busy.

[sshumakov]

Yes, otherwise webpack shows the following error:

ERROR in ./ClientApp/boot.tsx
    Module not found: Error: Can't resolve 'vs/editor/editor.main'

So I had to add it.

I uploaded webpack files:

• webpack.config.js
• webpack.config.vendor.js

[sshumakov]

It looks like loader doesn't load files like editor.main.js/editor.main.css etc. I expect that this is the reason of
error bootstrap 3076785…:780 Error: define cannot be used indirect

[akosyakov]

PRs are welcomed. The react page should be added to the existing example.

[SamVerschueren]

Would it be possible to fork vscode-languageserver-types and transpile to a webpack friendly format like commonjs? I did it locally and it worked perfectly fine. Couldn't get the umd bundle to work, even with the noparse option. Would be happy to fork it and release under a different name/namespace. Another benefit is that users from Angular-CLI or create-react-app aren't able to edit the webpack.config.js file because it is hidden. So they can't add the noParse option without ejecting.

Another option is to create a new issue in the https://github.com/Microsoft/vscode-languageserver-node repository and ask if they would be interested to ship a Webpack friendly module as well together with the umd bundle. Not sure why they are using umd in the first place instead of commonjs.

[gatesn]

The way I've got it working is to add noParse and pass through the Babel loader:

    module: {
        // vscode-languageserver-types, require function is not used statically
        noParse: /vscode-languageserver-types/,
        rules: [{
            // vscode-base-languageclient is built in ES6 :(
            test: /(vscode-base-languageclient|vscode-languageserver-types)\/.*\.js$/,
            loader: 'babel-loader',
            options: {
                presets: ["env"]
            }
        }],
    },

    // vscode base languageclient is built for node, but we don't use the node parts of it
    // Mock out these modules to stop webpack complaining about missing imports.
    node: {
        dns: 'mock',
        net: 'mock'
    },

[SamVerschueren]

The downside is that this is not an option for Angular-CLI, Vue-CLI, create-react-app users as the webpack.config.js is not available. I transpiled it to CJS myself and replaced the contents in my node_modules folder and it worked out immediately.

[JulCesWhat]

@SamVerschueren Have you been able to use monaco-languageclient in an Angular CLI project? Is there a way that I could see an example source code?

[SamVerschueren]

Yes, I wrapped it in a module https://github.com/SamVerschueren/ngx-monaco

[SamVerschueren]

Ah, you mean the languageclient... No I did not, without manually overriding the languageserver-types with a CJS friendly version.

[JulCesWhat]

I am willing to override it for now until there is a better solution. Is there a way that I could get your CJS friendly version? Thanks for your help by the way.

[SamVerschueren]

I could put it in a gist if you want. I basically checked out that repository and manually compiled it to CJS instead of UMD.

[SamVerschueren]

@JulCesWhat Here you go https://gist.github.com/SamVerschueren/7bf41ae319280c8386a3ca430fad3bbe

[akosyakov]

in response to #4 (comment):
@SamVerschueren Ideally, we don't want to maintain forks. I've opened an issue: microsoft/vscode-languageserver-node#303

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[suhaskurade8]

I'm facing below errors -

1. Failed to handle request textDocument/codeAction 154 - System.ArgumentOutOfRangeException: Specified argument was out of the range of valid values.

2. OmniSharp.Extensions.JsonRpc.InputHandler: Failed to handle request textDocument/didChange - System.ArgumentOutOfRangeException: Specified argument was out of the range of valid values

3. Failed to handle request codeLens/resolve 171 - System.NullReferenceException: Object reference not set to an instance of an object