How to override terserOptions?

[josemanosalvas]

Hi everyone,

I'm using image-blob-reduce package which is not compatible with Terser's "compress" option, so I'm looking for a way to disable it.

I've tried to override Next's webpack config in next.config.js as follow:

// next.config.js

...
config.optimization.minimizer.push(
  new TerserPlugin({
    terserOptions: {
      compress: false,
    },
  })
);
...

But it doesn't seem to work. I've also tried to do this:

// next.config.js

...
config.optimization.minimizer = [];
config.optimization.minimizer.push(
  new TerserPlugin({
    terserOptions: {
      compress: false,
    },
  })
);
...

But then Next doesn't generate the required files (webpack-middleware-hash.js) for middlewares to build.

How can I override Terser compress option without breaking the new middleware feature?

Thank you in advance for your help

[josemanosalvas]

For those wanting to use image-blob-reduce with Next 12, I ended up monkey patching Next's webpack config with patch-package.

diff --git a/node_modules/next/dist/build/webpack-config.js b/node_modules/next/dist/build/webpack-config.js
index 5fe4dd5..29168a4 100644
--- a/node_modules/next/dist/build/webpack-config.js
+++ b/node_modules/next/dist/build/webpack-config.js
@@ -560,7 +560,8 @@ async function getBaseWebpackConfig(dir, { buildId , config , dev =false , isSer
             warnings: false,
             // The following two options are known to break valid JavaScript code
             comparisons: false,
-            inline: 2
+            inline: 2,
+            evaluate: false
         },
         mangle: {
             safari10: true

[flavianh]

I can confirm that this solution works. A few caveats though:

• Starting from the code in this codesandbox, I managed to check that the SWC minifier also breaks image-blob-reducer
• Make sure to rm -rf .next before you build with this change. This is especially important if your deployment environment has a cache. I'm using Vercel and without removing the previous build, the fix was not working

Please contribute also to the issue on the pica repo, which is the base library for image-blob-reducer

[thomas-d]

Has anyone else tried this with next.js 13 ? I can't get image-blob-reduce to work in production by applying the patch.

[dartenie]

Same here

[khuezy]

W/ latest next 14, here's one way to do it (it's not very clean)

   // this is ugly b/c the `minimizer` is an anonymous function, so there's no easy way to get the function name
    let terserIndex = config.optimization.minimizer.findIndex(fn => fn.toString().indexOf('TerserPlugin') > -1) 
    if (terserIndex === -1) terserIndex = config.optimization.minimizer.length
      config.optimization.minimizer[terserIndex] = new TerserPlugin({
          terserOptions: {
            compress: false
          }
        })
      

You can find the terse options here:

[marcorm]

not working for me (next 15)

  webpack: (
    config,
    // { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack },
  ) => {
    // Important: return the modified config
    let terserIndex = config.optimization.minimizer.findIndex(
      (fn: () => unknown) => fn.toString().indexOf('TerserPlugin') > -1,
    );
    if (terserIndex === -1) terserIndex = config.optimization.minimizer.length;
    config.optimization.minimizer[terserIndex] = new TerserPlugin({
      terserOptions: {
        keep_classnames: true,
        keep_fnames: true,
      },
    });
    return config;
  },

i still get the error (in typeorm):
Sep 02 18:15:14 TypeORMError: Cyclic dependency: "u"

[marcorm]

I ended up doing this:

  webpack: (
    config,
    // { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack },
  ) => {
    // Important: return the modified config
    config.optimization.minimizer = [
      new TerserPlugin({
        terserOptions: {
          keep_classnames: true,
        },
      }),
      new CssMinimizerPlugin({
        minimizerOptions: {
          processorOptions: {
            map: {
              inline: false,
              annotation: false,
            },
          },
        },
      }),
    ];
    return config;
  },