webpack-contrib/image-minimizer-webpack-plugin

squooshMinify throws error and stops webpack execution: "ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time"

Friksel opened this issue · 5 comments

Friksel commented

Bug report

Using ImageMinimixerPlugin.squooshMinify as implementation stops execution of a webpack build with the following error (running on node v18.12.1). Could be an issue inside squoosh, but could as well be a compatibility issue?

screenshot

Actual Behavior

See screenshot above. This happens when running a (prod.) build with webpack.

Expected Behavior

Just work like all months before now :)

How Do We Reproduce?

Install same versions, use the same config and run a webpack build:
This is the config we're using on the plugin:

new ImageMinimizerPlugin({
            test: /\.(png|webp|jpe?g|avif)$/i,
            minimizer: {
                implementation: ImageMinimizerPlugin.squooshMinify,
                options: {
                    encodeOptions: {
                        mozjpeg: { quality: 80 },
                        webp: { lossless: 1 },
                        avif: { cqLevel: 0 },
                    },
                    loader: false,
                },
            },
}),

Please paste the results of npx webpack-cli info here, and mention other relevant information

Running pnpm here, so did a pnpx webpack-cli info:

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 6.39 GB / 15.92 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 108.0.5359.125
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.54)
  Packages:
    babel-loader: ^8.3.0 => 8.3.0
    clean-after-emit-webpack-plugin: ^0.0.3 => 0.0.3
    clean-webpack-plugin: ^4.0.0 => 4.0.0
    copy-webpack-plugin: ^9.1.0 => 9.1.0
    css-loader: ^6.7.3 => 6.7.3
    ejs-webpack-loader: ^2.2.2 => 2.2.2
    eslint-import-resolver-webpack: ^0.13.2 => 0.13.2
    html-webpack-plugin: ^5.5.0 => 5.5.0
    image-minimizer-webpack-plugin: ^3.8.1 => 3.8.1
    loader-utils: ^1.4.2 => 1.4.2
    postcss-loader: ^6.2.1 => 6.2.1
    sass-loader: ^13.2.0 => 13.2.0
    svgo-loader: ^3.0.3 => 3.0.3
    terser-webpack-plugin: ^5.3.6 => 5.3.6
    webpack: ^5.75.0 => 5.75.0
    webpack-cli: ^5.0.1 => 5.0.1
    webpack-dev-server: ^4.11.1 => 4.11.1
    webpack-shell-plugin-next: ^2.3.1 => 2.3.1
xavierfoucrier commented

Hello @Friksel,

Unfortunately the Squoosh CLI & library are no longer supported and are being deprecated...
In addition there are no plans to support NodeJS version 18 or greater.

See GoogleChromeLabs/squoosh#1242 (comment).

Looks like there is a workaround for your issue, but consider migrating to another image conversion tool in a near future.
GoogleChromeLabs/squoosh#1242 (comment)

Friksel commented

Hi @xavierfoucrier , Thanks a lot for the feedback on this. It's unfortunate to read google discontinued the thing. But that clearly explains the issues. I agree with you it's better to look for an alternative. Do you perhaps know if there is a valid alternative out there that could be used together with image-minimizer-webpack-plugin instead of squoosh?
Thanks again for the feedback!

  • 👍1
xavierfoucrier commented

@Friksel yup! I am giving a try with sharp, it looks very promising!

See:

💡 Please don't forget to close this issue when you are done with it.

alexander-akait commented

@Friksel you can try to use sharp, we have docs about it

xavierfoucrier commented

@Friksel @alexander-akait I can confirm, sharp work like a sharm, and run extremely fast! 🚀

  • ❤️1