Webpack error: ERROR in index.bundle.js from UglifyJs

Question

I am having a problem with webpack when building my project for production. Apparently it´s some interaction problem between query-string and Uglify. Hi have searched stack overflow for a while, and tried a lot of stuff but can´t find a solution or a reason for the issue.

Maybe someone has a hint i can try or a solution, because at the moment i am stuck.

The error which is appearing when building for production is the following:

......

ERROR in index.bundle.js from UglifyJs
Invalid assignment [./node_modules/query-string/index.js:8,0][index.bundle.js:62484,30]

ERROR in index.bundle.js from UglifyJs
Invalid assignment [./node_modules/query-string/index.js:8,0][index.bundle.js:62484,30]

.......


npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @coreui/[email protected] build: `webpack -p --progress --env.prod`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @coreui/[email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ls/.npm/_logs/2018-05-21T18_00_43_739Z-debug.log

My webpack config is the following :

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const extractCSS = new ExtractTextPlugin('[name].fonts.css');
const extractSCSS = new ExtractTextPlugin('[name].styles.css');

const BUILD_DIR = path.resolve(__dirname, 'build');
const SRC_DIR = path.resolve(__dirname, 'src');

console.log('BUILD_DIR', BUILD_DIR);
console.log('SRC_DIR', SRC_DIR);

module.exports = (env = {}) => {
  return {
    entry: {
      index: [SRC_DIR + '/index.js']
    },
    output: {
      path: BUILD_DIR,
      filename: '[name].bundle.js',
      publicPath: '/' //New to serve index always from root eaven on refresh
    },
    // watch: true,
    devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',

    devServer: {
      contentBase: BUILD_DIR,
      port: 9001,
      compress: true,
      hot: true,
      open: true,
      disableHostCheck: true,
      historyApiFallback: true,
      host: 'localhost',
      //publicPath: '/' //New to serve index always from root eaven on refresh
    },

    module: {
      rules: [{
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['react', 'env'],
              plugins: ['transform-object-rest-spread']
            }
          }
        },
        {
          test: /\.html$/,
          loader: 'html-loader'
        },
        {
          test: /\.(scss)$/,
          use: ['css-hot-loader'].concat(extractSCSS.extract({
            fallback: 'style-loader',
            use: [{
                loader: 'css-loader',
                options: {
                  alias: {
                    '../img': '../public/img'
                  }
                }
              },
              {
                loader: 'sass-loader'
              }
            ]
          }))
        },
        {
          test: /\.css$/,
          use: extractCSS.extract({
            fallback: 'style-loader',
            use: 'css-loader'
          })
        },
        {
          test: /\.(png|jpg|jpeg|gif|ico)$/,
          use: [{
            // loader: 'url-loader'
            loader: 'file-loader',
            options: {
              name: './img/[name].[hash].[ext]'
            }
          }]
        },
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'file-loader',
          options: {
            name: './fonts/[name].[hash].[ext]'
          }
        }
      ]
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: true
      }),

      new webpack.NamedModulesPlugin(),
      extractCSS,
      extractSCSS,
      new HtmlWebpackPlugin({
        inject: true,
        template: './public/index.html'
      }),
      new CopyWebpackPlugin([{
        from: './public/img',
        to: 'img'
      }], {
        copyUnmodified: false
      })
    ]
  }
};

My package.json file is the following:

{
  "name": "@coreui/react",
  "version": "1.0.10",
  "description": "Open Source Bootstrap Admin Template",
  "author": "Łukasz Holeczek",
  "homepage": "http://coreui.io",
  "copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
    "start": "webpack-dev-server --progress --color --inline --env.dev",
    "build": "webpack -p --progress --env.prod",
    "clean": "rimraf ./build"
  },
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-plugin-transform-object-rest-spread": "6.26.0",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "6.24.1",
    "copy-webpack-plugin": "4.3.1",
    "css-hot-loader": "1.3.6",
    "css-loader": "0.28.9",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "2.30.1",
    "node-sass": "4.7.2",
    "rimraf": "2.6.2",
    "sass-loader": "6.0.6",
    "source-list-map": "2.0.0",
    "style-loader": "0.20.1",
    "uglify-js": "3.3.9",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "url-loader": "0.6.2",
    "webpack": "3.10.0",
    "webpack-dev-server": "2.11.1"
  },
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.4",
    "@fortawesome/fontawesome-free-brands": "^5.0.8",
    "@fortawesome/fontawesome-free-regular": "^5.0.8",
    "@fortawesome/fontawesome-free-solid": "^5.0.8",
    "@fortawesome/react-fontawesome": "0.0.17",
    "availity-reactstrap-validation": "^1.4.3",
    "axios": "^0.18.0",
    "bootstrap": "4.0.0",
    "chart.js": "2.7.1",
    "classnames": "^2.2.5",
    "csv": "^2.0.0",
    "document": "^2.0.0",
    "flag-icon-css": "2.9.0",
    "font-awesome": "4.7.0",
    "history": "4.7.2",
    "immutability-helper": "^2.6.6",
    "lodash": "^4.17.5",
    "moment": "^2.21.0",
    "promise-file-reader": "^1.0.2",
    "query-string": "^6.0.0",
    "react": "16.2.0",
    "react-addons-shallow-compare": "^15.6.2",
    "react-avatar-image-cropper": "^1.1.7",
    "react-big-calendar": "^0.19.0",
    "react-bootstrap-table": "^4.3.1",
    "react-chartjs-2": "2.7.0",
    "react-codemirror2": "^4.2.1",
    "react-data-grid": "^3.0.11",
    "react-datepicker": "^1.4.1",
    "react-dom": "16.2.0",
    "react-dropzone": "^4.2.9",
    "react-google-maps": "^9.4.5",
    "react-ladda": "^6.0.0",
    "react-quill": "^1.2.7",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "react-router-dom": "4.2.2",
    "react-select": "^1.2.1",
    "react-stars": "^2.2.5",
    "react-tag-input": "^4.9.1",
    "react-text-mask-hoc": "^0.10.6",
    "react-toastify": "^4.0.0-rc.4",
    "react-transition-group": "2.2.1",
    "react-validation": "^3.0.7",
    "react-window-size": "^1.2.0",
    "reactstrap": "^5.0.0-beta.2",
    "redux": "^3.7.2",
    "redux-form": "^7.3.0",
    "redux-thunk": "^2.2.0",
    "simple-line-icons": "2.4.1",
    "spinkit": "^1.2.5",
    "uuid": "^3.2.1"
  },
  "engines": {
    "node": ">= 8.9.4",
    "npm": ">= 5.6.0"
  }
}

UPDATE

Apparently there is a problem with the source-map option.

If i use

devtool: env.prod ? 'cheap-module-eval-source-map' : 'cheap-module-eval-source-map',

instead of

devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',

It builds with no problem. Any ideas/comments?

Answer 1

I've also had this issue and it's true. UglifyJS in Webpack3.x does not support minifiying ES2015(ES6). Other people have used babel-minify-webpack-plugin to fix the issue however if you want to continue using UglifyJS. I'd recommend using the ES5 version of query-string. You'll find it stated in the Read Me.