Production build with Webpack 3.8.1 throws Uglifyjs Error

[zachurich]

When running webpack -p to build my production bundle while wikiquote is being imported/required, I receive the following error from my Webpack output, causing the build to fail.

ERROR in bundle.js from UglifyJs
Unexpected token name «t», expected punc «)» [bundle.js:1,338006]

Below is my webpack.config.js

var path = require("path");
var webpack = require("webpack");
var env = process.env.NODE_ENV || "development";

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var UglifyJsPlugin = require("uglifyjs-webpack-plugin");

var HtmlWebpackPlugin = new HtmlWebpackPlugin({
  template: "template.html",
  inject: "body"
});
var extractPlugin = new ExtractTextPlugin({
  filename: "main.css"
});
var UglifyJsPlugin = new UglifyJsPlugin({
  uglifyOptions: {
    sourcemaps: true
  }
});

module.exports = {
  entry: "./src/index.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        query: {
          presets: ["react", "es2015", "es2017"],
          plugins: ["transform-class-properties"]
        }
      },
      {
        test: /\.scss$/,
        use: extractPlugin.extract({
          use: ["css-loader", "sass-loader"]
        })
      }
    ]
  },
  plugins: [extractPlugin, HtmlWebpackPlugin, UglifyJsPlugin],
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build"),
    publicPath: "/build"
  },
  devServer: {
    contentBase: path.join(__dirname, "/build"),
    compress: true,
    port: 3000,
    headers: {
      "Access-Control-Allow-Origin": "*"
    }
  }
};

I look forward to hearing back about this issue and getting it resolved swiftly if possible!

[fdesjardins]

Not sure what that error message is about. I tried your config and was able to import wikiquote and build alright.

Sounds like it might be related to es6+ language features. See webpack-contrib/uglifyjs-webpack-plugin#78.

Try updating to the latest version of webpack and use the webpack.optimize.UglifyJsPlugin? You might also need a polyfill or the transform-runtime plugin.

[zachurich]

I was playing around with various config settings to get it to work, but I'll keep at it. Everything I'm doing is es6+ related (i'm using React), so I assumed it was something specifically in this module causing issues since it only happens when I include it.