Webpack build results Terser Error: Unexpected token: punc ())

1.6k Views Asked by At

I've been cleaning up my npm audit errors and after I was done I could not execute npm tun build anymore.

Error

ERROR in web/themes/custom/js/funds-chunk.js from Terser
Unexpected token: punc ()) [webpack://./node_modules/source-map-loader/dist/cjs.js!./frontend/js/shared/select2.countSelectionAdapter.js:18,0][web/themes/custom/js/funds-chunk.js:26214,4]
    at ne (/node_modules/terser/dist/bundle.min.js:1:19592)
    at c (/node_modules/terser/dist/bundle.min.js:1:28298)
    at l (/node_modules/terser/dist/bundle.min.js:1:28389)
    at f (/node_modules/terser/dist/bundle.min.js:1:28442)
    at /node_modules/terser/dist/bundle.min.js:1:38167
    at x (/node_modules/terser/dist/bundle.min.js:1:38198)
    at O (/node_modules/terser/dist/bundle.min.js:1:34874)
    at U (/node_modules/terser/dist/bundle.min.js:1:42405)
    at me (/node_modules/terser/dist/bundle.min.js:1:48326)
    at /terser/dist/bundle.min.js:1:49206

package.json

{
...
 "scripts": {
    "build": "webpack --config webpack.config.js --env production",
  },

  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@types/jquery": "^3.5.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.6.0",
    "file-loader": "^6.0.0",
    "image-webpack-loader": "^6.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "prettier": "2.8.1",
    "sass": "1.32",
    "sass-loader": "^9.0.2",
    "scss-loader": "0.0.1",
    "terser-webpack-plugin": "^3.0.6",
    "ts-loader": "^8.0.18",
    "typescript": "^4.2.3",
    "webpack-cli": "^4.7.2",
    "webpack-merge": "^5.0.8"
  },
  "dependencies": {
    "@popperjs/core": "^2.9.2",
    "@types/bootstrap": "^5.0.12",
    "@types/googlemaps": "^3.43.3",
    "@types/iframe-resizer": "^3.5.9",
    "@types/js-cookie": "^3.0.0",
    "@types/requirejs": "^2.1.32",
    "autoprefixer": "^9.8.5",
    "bootstrap": "^4.0.0",
    "filemanager-webpack-plugin": "^8.0.0",
    "fork-ts-checker-webpack-plugin": "^6.2.0",
    "highcharts": "^9.3.3",
    "highlight.js": "^10.1.1",
    "iframe-resizer": "^3.5.5",
    "jquery": "^3.5.1",
    "jquery-quicksand": "^1.6.0",
    "js-cookie": "^3.0.1",
    "loader-utils": "^2.0.3",
    "parsleyjs": "^2.9.2",
    "popper.js": "^1.0.8",
    "postcss-loader": "^3.0.0",
    "query-string": "^7.0.1",
    "select2": "^4.0.13",
    "slick-carousel": "^1.8.1",
    "source-map-loader": "^2.0.1",
    "swiper": "^6.5.3 <6.8",
    "tippy.js": "^6.2.6",
    "webpack": "^5.30.0"
  },
  "overrides": {
    "got": "12.1.0",
    "semver-regex@<3.1.4": "3.1.4",
    "semver-regex@>=4.0.0 <4.0.3": "4.0.3",
    "trim-newlines": "4.0.1",
    "minimist": "1.2.6",
    "terser@<4.8.1": "4.8.1",
    "terser@>=5.0.0 <5.14.2": "5.14.2",
    "nth-check": "2.0.1",
    "minimatch": "3.0.5"
  }
}

webpack.config.prod.js

const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: false,
        terserOptions: {
          ecma: 5, // IE11
          compress: true,
          output: {
            comments: false,
            beautify: false
          }
        }
      })
    ]
  },

  module: {
    rules: [{

      test: /images.*\.(jpg|jpeg|gif|png|svg|webp)$/i,
      use: info => {
        const theme = path.basename(info.issuer, path.extname(info.issuer));
        return [{
            loader: "file-loader",
            options: {
              outputPath: url => path.join('/web/themes/custom', theme, 'dist/images', url),
              name: "[name].[ext]",
              publicPath: '../images'
            },
          },
        ]
      }
    }]
  }
};

I've looked into these:
https://github.com/webpack-contrib/terser-webpack-plugin/issues/114,

https://github.com/jantimon/html-webpack-plugin/issues/1262 but I do not use uglify or html-minifier.

https://github.com/webpack/webpack/issues/14662 updated webpack from 5.30.0 to version 5.75 did not help

Webpack 5 - "Unexpected token: punc (.)" after import axios adding mode: web didn't do a thing

0

There are 0 best solutions below