2

I am trying to build the react app with minification using uglifyjs-webpack-plugin But it's failing in production mode due to UglifyJS.

I am getting the following error.

ERROR in bundle.js from UglifyJs Unexpected token: keyword «const» [./src/utils/Constants.js:1,0][bundle.js:228154,0]

Below is my webpack config may be I am missing some babel plugin. Any help would be appreciated.

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const bourbon = require('node-bourbon').includePaths;
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3000;
const PROXY = `http://${HOST}:${PORT}`;

const config = {
    entry: ["core-js/stable", "regenerator-runtime/runtime", "./src/index.js"],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build'),
        publicPath: '/'
    },
    module: {
        rules: [{
                test: /.(jsx|js)?$/,
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                ],
                loader: 'babel-loader',
                options: {
                    "presets": [
                        [
                            "@babel/preset-env",
                            {
                                "targets": {
                                    "node": "current"
                                }
                            }
                        ],
                        "@babel/preset-react"
                    ],
                    "plugins": [
                        "@babel/plugin-syntax-dynamic-import",
                        "@babel/plugin-syntax-import-meta",
                        "@babel/plugin-proposal-class-properties",
                        ["@babel/plugin-proposal-decorators", { "legacy": true }],
                        ["@babel/plugin-proposal-class-properties", { "loose": true }],
                        "@babel/plugin-proposal-function-sent",
                        "@babel/plugin-proposal-export-namespace-from",
                        "@babel/plugin-proposal-numeric-separator",
                        "@babel/plugin-proposal-throw-expressions",
                        "@babel/plugin-proposal-export-default-from",
                        "@babel/plugin-proposal-logical-assignment-operators",
                        "@babel/plugin-proposal-optional-chaining",
                    ]
                }
            },
            {
                test: /.(css|scss|sass)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                autoprefixer(),
                            ]
                        }
                    }, 'sass-loader?includePaths[]=' + bourbon,
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: 'url-loader?limit=10000&name=img/[hash].[ext]'
            },
            {
                test: /\.(ttf|ttc|eot|otf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: 'url-loader?limit=10000&name=fonts/[hash].[ext]'
            }

        ]
    },
    resolve: {
        extensions: ['.json', '.js', '.jsx', '.css'],
    },
    devtool: 'source-map',
    devServer: {
        historyApiFallback: true,
        host: HOST,
        port: PORT,
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './css/style.css',
            chunkFilename: "[id].css"
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [
                    autoprefixer(),
                ]
            }
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new BrowserSyncPlugin({
            // browse to http://localhost:3000/ during development,
            // ./public directory is being served
            host: HOST,
            port: PORT,
            proxy: PROXY
        }),

        
        new CopyWebpackPlugin([{
                from: './*.html',
                to: './',
                context: 'public/'
            },
            {
                from: './*.ico',
                to: './',
                context: 'public/'
            },
            {
                from: './img/**/*',
                to: './',
                context: 'public/'
            },
            {
                from: './fonts/**/*',
                to: './',
                context: 'public/'
            },
            {
                from: './js/**/*',
                to: './',
                context: 'public/'
            }
        ], {
            copyUnmodified: true
        }),
    ],
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    performance: {
        hints: false
    } // Bundle warnings
};
module.exports = config;
Saurabh Sharma
  • 2,364
  • 4
  • 18
  • 36
  • 1
    Use [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) as highlighted in [this](https://stackoverflow.com/questions/47439067/uglifyjs-throws-unexpected-token-keyword-const-with-node-modules/53336031#53336031) stackoverflow post – tarzen chugh Jul 26 '19 at 09:10
  • 1
    Why? I am looking for a solution with UglifyJS not looking for any other plugin. – Saurabh Sharma Jul 26 '19 at 09:19
  • 1
    @SaurabhSharma because a lot of people is moving to terser in the ReactJS ecosystem world. You can find a lot of discussion about this. UglifyJS should work too if you transpile it before, but terser is more mainstream – keul Jul 26 '19 at 09:35

0 Answers0