Monaco-editor: Error: Illegal value for lineNumber with webpack & uglify

[poloten4uk]

We are using react-monaco-editor in our project, but I reproduced this error in just monaco-editor as well.

Reproduced on browser-esm-webpack sample from here

"monaco-editor": "latest",
"uglifyjs-webpack-plugin": "^2.1.0"

Google Chrome
Version 71.0.3578.98 (Official Build) (64-bit)

But reproduced in other browsers as well.

Steps to Reproduce:

1. Changed webpack config:

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: {
        "app": './index.js',
        "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js'
    },
    output: {
        globalObject: 'self',
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }]
    },
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            sourceMap: true,
            uglifyOptions: {
                compress: {
                    drop_console: true
                }
            }
        })],
    },
    plugins: [
        new MonacoWebpackPlugin(),
    ]
};

1. After minimization, we have this error:

textModel.js:543 Uncaught Error: Illegal value for lineNumber
    at x.getLineMaxColumn (textModel.js:543)
    at x._validateRangeRelaxedNoAllocations (textModel.js:585)
    at x._deltaDecorationsImpl (textModel.js:1342)
    at x.deltaDecorations (textModel.js:1161)
    at e.n.deltaDecorations (codeEditorWidget.js:764)
    at r._renderMessages (modesContentHover.js:340)
    at r._withResult (modesContentHover.js:239)
    at r._completeCallback (modesContentHover.js:147)
    at r._onComplete (hoverOperation.js:79)
    at r._triggerSyncComputation (hoverOperation.js:56)

[alexdima]

@poloten4uk I am not sure what is wrong with your setup, but I am having trouble to reproduce. What is confusing is that you have mixed two distinct webpack usage patterns.

One is webpack without the monaco-editor-webpack-plugin (i.e. manual configuration) and one is webpack with the monaco-editor-webpack-plugin (i.e. more automated configuration).

If you prefer to use the plugin way, then why not start with this example:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './index.js',
    context: __dirname,
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    },
    plugins: [
        new MonacoWebpackPlugin()
    ]
};

Then, you can remove the mode from the above or change it to production and you will get minified output.

[poloten4uk]

Ok, thanks, got it.

So, can I use it with UglifyJsPlugin and if so how it needs to be done?
I cloned browser-esm-webpack and changed webpack.config:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');

module.exports = {
    entry: {
        "app": './index.js',
        // Package each language's worker and give these filenames in `getWorkerUrl`
        "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js',
        "json.worker": 'monaco-editor/esm/vs/language/json/json.worker',
        "css.worker": 'monaco-editor/esm/vs/language/css/css.worker',
        "html.worker": 'monaco-editor/esm/vs/language/html/html.worker',
        "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker',
    },
    output: {
        globalObject: 'self',
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    },
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            sourceMap: true,
            uglifyOptions: {
                compress: {
                    drop_console: true
                }
            }
        })],
    },
};

Fixed some errors with const keyword:

And then webpack build succeded and error is reproduced.

[sumboxcar182]

I just ran into this issue as well on my end. My workaround, which isn't the best, is that i dropped UglifyJS in favor of terser-webpack-plugin. The setup was pretty straightforward at least and it fixed the issue.

It seems like UglifyJS cannot handle es6 code, which is why it throws that error.