webpack -p ERROR in common.js from UglifyJs Invalid assignment [common.js:45003,29]

[khorark]

Hi. i don't create build with webpack command webpack -p. I have error

ERROR in common.js from UglifyJs
Invalid assignment [common.js:45003,29]

But create build with options webpack --env=prod run. I think problem in to compress file.

My webpack config:

const path = require('path');
const webpack = require("webpack");
const srcPath = path.resolve(__dirname, "../src");
const hostPath = path.resolve(__dirname, "developPath.json");
const host = require(hostPath);

module.exports = {
cache: true,

entry: {
    MSP2: ["babel-polyfill", 'react-hot-loader/patch', "./core/js/newCore/src/core/coreEntryPoint.js"],
    tasks: "./core/js/newCore/src/tasks/tasksEntryPoint.js",
    regulation: "./core/js/newCore/src/regulation/main.js",
    delegation: "./core/js/newCore/src/delegation/main.js",
    kpi: "./core/js/newCore/src/kpi/kpiEntryPoint.js",
    rci: "./core/js/newCore/src/rci/rciEntryPoint.js",
    rbs: "./core/js/newCore/src/rbs/rbsEntryPoint.js",
    businessProcess: "./core/js/newCore/src/businessProcesses/main.js",
    exchangeAd: "./core/js/newCore/src/exchangeAd/main.js",
},

output: {
    path: path.resolve(__dirname, "../build/"),
    filename: "[name].js",
    publicPath: "/core/js/newCore/build/",
},

resolve: {
    extensions: ['.js', '.jsx', '.json', '*'],
},

module: {
    rules: [
        { //0
            test: /\.(js|jsx)$/,
            include: [srcPath],
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                        presets: [
                            ['es2015', {modules: false}],
                            'stage-0',
                            'react',
                        ],
                        plugins: [
                            'react-hot-loader/babel',
                            'transform-decorators-legacy',
                        ],
                    },
                },
            ],
        },
        { //1
            test: /\.css$/,
            include: [srcPath],
            use: [
                'style-loader', //1-0
                { //1-1
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                        modules: true,
                        localIdentName: '[name]__[local]__[hash:base64:5]',
                    },
                },

            ],
        },
        { //2
            test: /\.less$/,
            include: [srcPath],
            use: [
                'style-loader', //2-0
                { //2-1
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                        modules: true,
                        localIdentName: '[name]__[local]__[hash:base64:5]',
                    },
                },
                { //2-2
                    loader: 'less-loader',
                    options: {
                        sourceMap: true,
                    },
                },
            ],
        },
        { //3
            test: /\.(png|jpg|gif|svg)$/,
            include: [srcPath],
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                    },
                },
            ],
        },
    ],
},

devServer: {
    proxy: {
        "**": {
            "target": {
                "host": host.host,
                "protocol": 'http:',
                "port": 80,
            },
            changeOrigin: true,
        },
    },
    host: 'localhost',
    port: 8090,
    //webpack-dev-server -d --hot --inline --content-base public --port 8090 --host localhost
},

plugins: [
    new webpack.DllReferencePlugin({
        context: path.join(__dirname, "dll"),
        manifest: require("./dll/vendor-manifest.json"),
    }),
    new webpack.NamedModulesPlugin(),
],

};

[crabbly]

Hey @khorark , I renamed the library to print-js. Try using npm install print-js --save instead.

[tckastanek]

@khorark I'm also seeing the same bug--pretty sure it's coming from Uglify not supporting minifying the ES2015 code in the module. You might try removing the modules: false from your babel-loader to see if that works.

Buuut webpack might still transpile them incorrectly. @crabbly So the module would perhaps need to be pretranspiled before publishing? Or maybe there's a workaround somewhere in here: webpack/webpack#2902

[crabbly]

I use the library in a project with webpack, and I have no errors minifying or compiling.
@tckastanek , I don't know much about webpack configuration, I use a preset config that works well for me. :/

[crabbly]

@khorark Were you able to fix this issue?

[kyriacos]

@crabbly Same problem on our build too. Using create-react-app as is.

[khorark]

@crabbly No, problem persists. And IE 11 don't work.
My decision: I get you library and transpile her from webpack to build. After I get global variable window.printJS from import build file and this work. Use

import './printjs';

export default params => {
    window.printJS(params);
}

My webpack config to library.

const path = require('path');
const webpack = require("webpack");
const srcPath = path.resolve(__dirname, "../src");

module.exports = {
    cache: true,

    entry: {
        printjs: "./core/js/newCore/src/print.js/src/index.js",
        // tasks: "./core/js/newCore/src/tasks/tasksEntryPoint.js",
    },

    output: {
        path: path.resolve(__dirname, "../build/"),
        filename: "[name].js",
        publicPath: "/core/js/newCore/build/",
        library: "printJs",
    },

    resolve: {
        extensions: ['.js', '.jsx', '.json', '*'],
    },

    module: {
        rules: [
            { //0
                test: /\.(js|jsx)$/,
                include: [srcPath],
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                            presets: [
                                ['es2015', {modules: false}],
                                'stage-0',
                                'react',
                            ],
                            plugins: [
                                'react-hot-loader/babel',
                                'transform-decorators-legacy',
                            ],
                        },
                    },
                ],
            },
            { //1
                test: /\.css$/,
                include: [srcPath],
                use: [
                    'style-loader', //1-0
                    { //1-1
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            modules: true,
                            localIdentName: '[name]__[local]__[hash:base64:5]',
                        },
                    },

                ],
            },
            { //3
                test: /\.(png|jpg|gif|svg)$/,
                include: [srcPath],
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                        },
                    },
                ],
            },
        ],
    },
}; 

[crabbly]

@khorark have you tried the suggestion offered by @tckastanek , removing the modules: false from your babel-loader?

[khorark]

@crabbly, yes, I tried. It's no work.

[crabbly]

As already mentioned, uglify won't minify ES6, which is used in this library.
According to uglify's documentation, this package should be used:
https://github.com/mishoo/UglifyJS2/tree/harmony

Can you give it a try?

[crabbly]

With limited time to work on this library, I won't try to provide a solution for compilers that can't transpile ES6. A PR would be great tho. Thank you.

[op01]

Angular CLI 1.5 added support for ES2015 module.

angular/angular-cli#7610

[liaokaien]

@khorark

I ran into the same problem. I use uglifyjs-webpack-plugin instead of webpack.optimize.UglifyJsPlugin and set uglifyOption.ecma to 6, then the problem is solved

[crabbly]

The latest npm package version won't import ES6 code anymore. This should prevent issues for anybody using compilers that do not read ES6.