Uncaught (in promise) Error: Unexpected usage

[MassMessage]

I went to build the example folder, edited the files as below but at runtime, I'm getting this error:

Uncaught (in promise) Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editor.worker.bundle.js:8995)
    at SimpleWorkerServer._handleMessage (editor.worker.bundle.js:6629)
    at Object.handleMessage (editor.worker.bundle.js:6615)
    at SimpleWorkerProtocol._handleMessage (editor.worker.bundle.js:6484)
    at SimpleWorkerProtocol.handleMessage (editor.worker.bundle.js:6457)
    at SimpleWorkerServer.onmessage (editor.worker.bundle.js:6619)
    at self.onmessage (editor.worker.bundle.js:10166)

errors.js:8 Uncaught Error: Unexpected usage

Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editor.worker.bundle.js:8995)
    at SimpleWorkerServer._handleMessage (editor.worker.bundle.js:6629)
    at Object.handleMessage (editor.worker.bundle.js:6615)
    at SimpleWorkerProtocol._handleMessage (editor.worker.bundle.js:6484)
    at SimpleWorkerProtocol.handleMessage (editor.worker.bundle.js:6457)
    at SimpleWorkerServer.onmessage (editor.worker.bundle.js:6619)
    at self.onmessage (editor.worker.bundle.js:10166)

web config is basically unedited except to add the mode in exports:

/* --------------------------------------------------------------------------------------------
 * Copyright (c) 2018 TypeFox GmbH (http://www.typefox.io). All rights reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 * ------------------------------------------------------------------------------------------ */
const path = require('path');
const lib = path.resolve(__dirname, "lib");

const webpack = require('webpack');
const {merge} = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const common = {
    entry: {
        "main": path.resolve(lib, "main.js"),
        "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: lib
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.ttf$/,
            use: ['file-loader']
        }]
    },
    target: 'web',
    node: {
        fs: 'empty',
        child_process: 'empty',
        net: 'empty',
        crypto: 'empty'
    },
    resolve: {
        alias: {
            'vscode': require.resolve('@codingame/monaco-languageclient/lib/vscode-compatibility')
        },
        extensions: ['.js', '.json', '.ttf']
    }
};

if (process.env['NODE_ENV'] === 'production')
{
    module.exports = merge(common, {
        plugins: [
            new UglifyJSPlugin(),
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('production')
            })
        ],
        mode: 'production'
    });
}
else
{
    module.exports = merge(common, {
        devtool: 'source-map',
        mode: 'development',
        module: {
            rules: [{
                test: /\.js$/,
                enforce: 'pre',
                loader: 'source-map-loader',
                // These modules seems to have broken sourcemaps, exclude them to prevent an error flood in the logs
                exclude: [/vscode-jsonrpc/, /vscode-languageclient/, /vscode-languageserver-protocol/]
            }]
        }
    })
}

the moedified files from example folder goes as the following:

client.ts

import { MessageConnection } from 'vscode-jsonrpc';
import { listen } from '@codingame/monaco-jsonrpc';
import * as monaco from 'monaco-editor'
import {
    MonacoLanguageClient, CloseAction, ErrorAction,
    MonacoServices, createConnection
} from '@codingame/monaco-languageclient'
import normalizeUrl = require('normalize-url')
const ReconnectingWebSocket = require('reconnecting-websocket')

// register Monaco languages
monaco.languages.register({
    id: 'typescript',
    extensions: ['.ts'],
    aliases: ['TypeScript','ts','TS','Typescript','typescript']
})

// create Monaco editor
const value = `
let message:string = 'foo!'
`;

monaco.editor.create(document.getElementById("container")!, {
    model: monaco.editor.createModel(value, 'typescript', monaco.Uri.parse('file:///C:\\Users\\jackjj\\Desktop\\project\\demo\\ts\\file.ts')),
    glyphMargin: true,
    theme: "vs-dark",
    lightbulb: {
        enabled: true
    }
})

// install Monaco language client services
MonacoServices.install(monaco, {rootUri: "file:///C:\\Users\\jackjj\\Desktop\\project\\demo\\ts\\"})

// create the web socket
const url = createUrl('ws://localhost:3000/ts')
const webSocket = createWebSocket(url)

// listen when the web socket is opened
listen({
    webSocket,
    onConnection: connection => {
        // create and start the language client
        const languageClient = createLanguageClient(connection);
        const disposable = languageClient.start();
        connection.onClose(() => disposable.dispose());
    }
});

function createLanguageClient(connection: MessageConnection): MonacoLanguageClient {
    return new MonacoLanguageClient({
        name: "Sample Language Client",
        clientOptions: {
            // use a language id as a document selector
            documentSelector: ['typescript'],
            // disable the default error handler
            errorHandler: {
                error: () => ErrorAction.Continue,
                closed: () => CloseAction.DoNotRestart
            }
        },
        // create a language client connection from the JSON RPC connection on demand
        connectionProvider: {
            get: (errorHandler, closeHandler) => {
                return Promise.resolve(createConnection(connection, errorHandler, closeHandler))
            }
        }
    });
}

function createUrl(path: string): string {
    return normalizeUrl(path);
}

function createWebSocket(url: string): WebSocket {
    const socketOptions = {
        maxReconnectionDelay: 10000,
        minReconnectionDelay: 1000,
        reconnectionDelayGrowFactor: 1.3,
        connectionTimeout: 10000,
        maxRetries: Infinity,
        debug: false
    };
    return new ReconnectingWebSocket(url, [], socketOptions);
}

main.ts

/* --------------------------------------------------------------------------------------------
 * Copyright (c) 2018 TypeFox GmbH (http://www.typefox.io). All rights reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 * ------------------------------------------------------------------------------------------ */

export { }

require('monaco-editor');
(self as any).MonacoEnvironment = {
    getWorkerUrl: () => './editor.worker.bundle.js'
}
require('./client');

server.ts

import * as express from "express";

const app = express();
app.use(express.static(__dirname));
app.listen(4200);

What's that error and how can I fix it?

[LahlouY]

Hi, did it work ? i have the same problem, but the project doesn't seem to work. When i change monaco-editor-core to monaco-editor i have a lot of errors and even after fixing it the autocompletion doesn't work

[MassMessage]

Hi, did it work ? i have the same problem, but the project doesn't seem to work. When i change monaco-editor-core to monaco-editor i have a lot of errors and even after fixing it the autocompletion doesn't work

I did but don't remember now how it ended up working. I got alot of issues but one thing I changed and fixed alot of them was using @codingame/monaco-languageclient instead of monaco-languageclient

[LahlouY]

@MassMessage But when i use @codingame/monaco-languageclient i have another type of error

Uncaught TypeError: model.getLanguageId is not a function
at MonacoWorkspace.setModel (main.bundle.js:66358)
at MonacoWorkspace.addModel (main.bundle.js:66339)
at new MonacoWorkspace (main.bundle.js:66317)
at create (main.bundle.js:138145)
at Object.install (main.bundle.js:138151)
at Object. (main.bundle.js:126977)
at webpack_require (main.bundle.js:50)
at Object. (main.bundle.js:68086)
at webpack_require (main.bundle.js:50)
at main.bundle.js:145

And did you use jsonrpc-ws-proxy for the language-server? because i get an error from that.

if you do find your project can you please post it ? it can really help a lot of people . Thanks

[CGNonofr]

Your monaco-editor is just out of date

[LahlouY]

@CGNonofr thanks for answering, what version should I use ? And what version of webpack ? Because I got à webpack issue whenever I use the last version of Monaco.

[CGNonofr]

Why wouldn't you want to use the last one? Without any error message, I probably won't be able to help

[LahlouY]

@CGNonofr When using the last version of monaco-editor i get this error

ERROR in ./node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.ttf
Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined
at new NodeError (node:internal/errors:371:5)
at validateString (node:internal/validators:119:11)
at Object.relative (node:path:497:5)
at Object.loader (C:\Users\yylla\Desktop\Projet\Monaco-ts-lsp-master\node_modules\file-loader\dist\index.js:78:72)
@ ./node_modules/css-loader!./node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.css 7:473-497
@ ./node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.css
@ ./node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codiconStyles.js
@ ./node_modules/monaco-editor/esm/vs/editor/editor.all.js
@ ./node_modules/monaco-editor/esm/vs/editor/edcore.main.js
@ ./node_modules/monaco-editor/esm/vs/editor/editor.main.js
@ ./lib/main.js

my package.json :

{
  "name": "monaco-editor-lsp",
  "author": "Wiihame<Weihang.chen@yff.com>",
  "version": "0.0.1",
  "dependencies": {
    "@codingame/monaco-jsonrpc": "0.3.1",
    "@codingame/monaco-languageclient": "0.17.0",
    "express": "4.15.2",
    "file-loader": "6.2.0",
    "monaco-editor": "0.30.1",
    "normalize-url": "^2.0.1",
    "reconnecting-websocket": "^3.2.2",
    "request-light": "^0.2.2",
    "vscode-json-languageservice": "^4.1.0",
    "vscode-languageserver": "^7.0.0",
    "vscode-ws-jsonrpc": "^0.0.2-1",
    "ws": "^5.0.0"
  },
  "devDependencies": {
    "@types/express": "^4.0.35",
    "@types/node": "^7.0.12",
    "@types/normalize-url": "^1.9.1",
    "@types/ws": "0.0.39",
    "css-loader": "^0.28.11",
    "rimraf": "^2.6.2",
    "source-map-loader": "^0.2.3",
    "style-loader": "^0.20.3",
    "typescript": "^3.0.1",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "webpack": "3.12.0",
    "webpack-merge": "^4.1.2"
  },
  "scripts": {
    "prepare": "yarn run clean && yarn run build",
    "compile": "tsc",
    "watch": "tsc -w",
    "clean": "rimraf lib",
    "copy": "copy src\\index.html lib\\index.html",
    "build": "yarn run compile && webpack && yarn run copy",
    "start": "node lib\\server.js",
    "start:ext": "node lib\\server.js --external"
  }
}

and webpack :

const path = require('path');
const lib = path.resolve(__dirname, "lib");

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const common = {
    entry: {
        "main": path.resolve(lib, "main.js"),
        "editor.worker": 'monaco-editor\\esm\\vs\\editor\\editor.worker.js',
    },
    output: {
        filename: '[name].bundle.js',
        path: lib
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
            {
                test: /\.ttf$/,
                use: ['file-loader']
            }]
    },
    target: 'web',
    node: {
        fs: 'empty',
        child_process: 'empty',
        net: 'empty',
        crypto: 'empty'
    },
    resolve: {
        alias: {
            'vscode': require.resolve('@codingame\\monaco-languageclient\\lib\\vscode-compatibility')
        },
        extensions: ['.js', '.json', '.ttf','.tf']
    }
};

if (process.env['NODE_ENV'] === 'production') {
    module.exports = merge(common, {
        plugins: [
            new UglifyJSPlugin(),
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('production')
            })
        ]
    });
} else {
    module.exports = merge(common, {
        devtool: 'source-map',
        module: {
            rules: [{
                test: /\.js$/,
                enforce: 'pre',
                loader: 'source-map-loader',
                exclude: [/vscode-jsonrpc/, /vscode-languageclient/, /vscode-languageserver-protocol/]
            }]
        }
    })
} 

i am using a proxy between the editor and the language server : jsonrpc-ws-proxy
But i am getting an error when i try to start the proxy

Forwarding new client
Launching Example Server failed: Error: spawn typescript-language-server ENOENT
Client closed

i am following this tutorial : https://medium.com/dscddu/language-server-protocol-adding-support-for-multiple-language-servers-to-monaco-editor-a3c35e42a98d

[CGNonofr]

I don't think you can use file-loader with the css loader together

If you are having issues about webpack or jsonrpc-ws-proxy, please use their github or stackoverflow

Thanks for reporting only issues regarding the last version of @codingame/monaco-languageclient here