I'm developing ReactJs App and using UglifyJsPlugin in webpack for minify js.but wen i try to build, prompt bellow error.

ERROR in bundle.js from UglifyJs Unexpected token: keyword «const»

Webpack : 4 babel : 7

"dependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
}

webpac.config.js

const path = require('path');
const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },

  optimization: {
    minimizer: [
      new UglifyJsPlugin(),
    ],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|es6)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ["@babel/preset-env"]
       }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader'],
        })
      },
      {
        test: /\.(gif|png|jpe?g|svg||woff|woff2|eot|ttf)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true, 
              disable: true, 
            }
          }
        ]
      },
    ]
  },
  node: {
    fs: 'empty',
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: path.resolve(__dirname, 'public', 'index.html'),
      filename: "./index.html"
    }),
    new Dotenv({ 
      safe: true, 
      systemvars: true, 
      silent: true, 
      defaults: false 
    }),
    new ExtractTextPlugin('style.css',{allChunks: false}),
    new webpack.optimize.OccurrenceOrderPlugin(true),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),

  ]
}

I'm developing ReactJs App and using UglifyJsPlugin in webpack for minify js.but wen i try to build, prompt bellow error.

ERROR in bundle.js from UglifyJs Unexpected token: keyword «const»

Webpack : 4 babel : 7

"dependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
}

webpac.config.js

const path = require('path');
const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },

  optimization: {
    minimizer: [
      new UglifyJsPlugin(),
    ],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|es6)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ["@babel/preset-env"]
       }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader'],
        })
      },
      {
        test: /\.(gif|png|jpe?g|svg||woff|woff2|eot|ttf)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true, 
              disable: true, 
            }
          }
        ]
      },
    ]
  },
  node: {
    fs: 'empty',
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: path.resolve(__dirname, 'public', 'index.html'),
      filename: "./index.html"
    }),
    new Dotenv({ 
      safe: true, 
      systemvars: true, 
      silent: true, 
      defaults: false 
    }),
    new ExtractTextPlugin('style.css',{allChunks: false}),
    new webpack.optimize.OccurrenceOrderPlugin(true),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),

  ]
}

• javascript
• reactjs
• webpack
• babeljs

• Try remove exclude: /node_modules/, and see what happens. If there will be no error it means one of your node_modules library have const and it also should be parsed via bable-loader – Arseniy-II Commented Aug 23, 2019 at 7:23
• @Arseniy-II thanks. After removing node_modules,its build without an error.but how can parse it via babel-loader? – Tje123 Commented Aug 23, 2019 at 7:36
• I have added an answer for you :) – Arseniy-II Commented Aug 23, 2019 at 8:09

3 Answers 3

You can try to use https://github./webpack-contrib/terser-webpack-plugin if nothing helps you.

You should parse some of your node_modules

Problem is that some of your node_modules have const and they also should be parsed via babel-loader.

There are a few ways how you can do it. You may read that thread and try what is better for you.

I prefer something like this:

test: /\.(js|jsx|es6)$/,
exclude: /node_modules\/(?!(MY-MODULE|ANOTHER-ONE)\/).*/,

That will ignore all node_modules except MY-MODULE and ANOTHER-ONE modules. As result last two will be parsed.

Try to add below dependency

$ npm install terser-webpack-plugin --save-dev

webpack.config.js

 const TerserPlugin = require('terser-webpack-plugin');
 module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

happy codding :)