Use latest terser-webpack-plugin with Webpack5

Question

According to this link (Terser documentation) if you are using latest Webpack 5, you don't need to install the Terser plugin as it is included in Webpack 5 out of the box. However, I am having a hard time to get this working.

If I remove the terser-webpack-plugin from my packages.json file and I try to use it like this (see below webpack.production.js), I get build errors like this:

[webpack-cli] Failed to load 'D:\Project\React\MyApp\config\webpack.production.js' config

[webpack-cli] Error: Cannot find module 'terser-webpack-plugin'

webpack.production.js

const TerserPlugin = require('terser-webpack-plugin');
const webpack = require('webpack');
const { merge } = require('webpack-merge');

module.exports = merge(commonCfg, {
        ......
        optimization: {
            minimize: true,
            minimizer: [new TerserPlugin({
                cache: false,
                parallel: false,
                sourceMap: true,
            })]
        },

Now, if I include the latest terser-webpack-plugin version (5.1.1) on my package.json and run my build, I get the following error message:

[webpack-cli] Failed to load 'D:\Project\React\MyApp\config\webpack.production.js' config

[webpack-cli] Invalid options object. Terser Plugin has been initialized using an options object that does not match the API schema.

• options has an unknown property 'sourceMap'. These properties are valid: object { test?, include?, exclude?, terserOptions?, extractComments?, parallel?, minify? }

The only way I can make this work is keeping terser-webpack-plugin on version 4.2.X.

Is there a way I can make this work with latest Terser version? Or maybe I misunderstood the documentation?

Poleyn

This seems to be a compatibility issue.. Try to work around by adapting to the schema pattern or downgrade.. – Pheasant

looks like the problem is even worst, even if you build it with the proper arguments the minified code isn't run on the browser, don't have too much time to explore why but what i did is to lock webpack to version 5.16.0 and terser-webpack-plugin to version 5.1.1 and move the sourceMap: true into terserOptions and looks like things works ok. as @Pheasant said, it's probably a compatibility issue. overall. looks like webpack 5 release is not 100% cooked, i'm quote sorry i upgraded. – Grammarian

Answer 1

Hi here is how i resolved the Terserof Webpack 5

Before Webpack 5:

minimizer: [
  new TerserPlugin({
    terserOptions: {
      mangle: {
        compress: {},
      },
    }
  })
]

After Webpack 5:

minimizer: [
  (compiler) => {
    const TerserPlugin = require('terser-webpack-plugin');
    new TerserPlugin({
      terserOptions: {
        compress: {},
      }
    }).apply(compiler);
  },
]

you can read more about it here https://webpack.js.org/configuration/optimization/ and to check the terser option check this url https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions

here is link to my article with more migration error problem solved https://medium.com/@arianpopalyar/webpack-4-to-webpack-5-migration-9bc683d2bc72

Ose

Thank you it resolved the error with webpack 5, unknown property minimizer – Stegodon

It worked with the compiler for me. Thanks – Elexa

Answer 2

I have tried the below configuration with webpack version 5.25.0, no need install terser-webpack-plugin and it's worked for me.

 optimization: {
   minimizer: [(compiler) => {
    return () => {
     return {
      terserOptions: {
        mangle: {
          reserved: ['Td', 'Tr', 'Th', 'Thead']
        }
      }
     }
    }
  }]
 }

Selfmoving

This worked for me; minimizer: [() => ({ terserOptions: { mangle: false } })] – Speaks

I tried but didn't work / webpack version 5.48.0 – Prime