Unexpected token: punc (:)

[shtengel]

• Operating System: MAC OSX
• Node Version: v10.13.0
• NPM Version: 6.6.0
• webpack Version: 4.39.1
• terser-webpack-plugin Version: 1.4.1

Expected Behavior

Be able to run npm build without exceptions

Actual Behavior

I dont why but now when im running webpack to build my ReactJS app im getting this error:

ERROR in main.51cb43366055e316f3ed.js from Terser
Unexpected token: punc (:) [main.51cb43366055e316f3ed.js:13127,15]

i can't find the file main.51cb43366055e316f3ed.js so i don't know whats the problem.
also its important to mention that im not using "terser" directly at all, i don't know which 3rd module is using it and cause the problem.

Code

// webpack.config.js
import HtmlWebpackPlugin from 'html-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
import path from 'path';
const useSourceMap = false;

export default {
  resolve: {
    extensions: ['*', '.js', '.jsx', '.json']
  },
  entry: path.resolve(__dirname, 'src/index'),
  target: 'web',
  mode: 'production',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].[contenthash].js'
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.ejs',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      },
      inject: true,
      trackJSToken: ''
    }),

    new CopyWebpackPlugin([{
       from: 'src/assets',
       to: path.resolve(__dirname, 'dist').concat('/assets')
     }]),

    new ImageminPlugin({pngquant: ({quality: '50'})})
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader?cacheDirectory=true']
      },
      {
        test: /\.eot(\?v=\d+.\d+.\d+)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: '[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              mimetype: 'application/font-woff',
              name: '[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              mimetype: 'application/octet-stream',
              name: '[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              mimetype: 'image/svg+xml',
              name: '[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(jpe?g|png|gif|ico)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          }
        ]
      },
      {
        test: /(\.css|\.scss|\.sass)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: useSourceMap
            }
          }, {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('cssnano'),
                require('autoprefixer'),
              ],
              sourceMap: useSourceMap
            }
          }, {
            loader: 'sass-loader',
            options: {
              includePaths: [path.resolve(__dirname, 'src', 'scss')],
              sourceMap: useSourceMap
            }
          }
        ]
      }
    ]
  }
};

[alexander-akait]

Please create minimum reproducible test repo

[alexander-akait]

Issue jantimon/html-webpack-plugin#1262

[thematho]

@shtengel Got the same issue here, the root of the issue is as @evilebottnawi mentioned, es2017 not being supported, my line of code that throws the issue looks like this:

export class MyField extends MyMixin(
 ControlMixin(VMixin(CMixin(SMixin(OMixin(MyElement))))), // <- when removing this trailing comma the error disappear
) {
//....

[alexander-akait]

@thematho open issue in terser, you catch a bug

[thematho]

@evilebottnawi tracked down the issue.
So in order to allow terser to compile trailing commas in function parameters, we need to setup the ecma option to 8, in my case, the angular-cli uses ecma: 6
No issue to report on terser side, in this case I think the terser-webpack-plugin only needs to update the options passed

[alexander-akait]

@thematho we can't update options because we don't know what is ecma version you use in code, you need setup this manually

[alexander-akait]

Close in favor jantimon/html-webpack-plugin#1262