Не работает ImageMinimizerPlugin в Webpack

При попытке сжать изображение в webpack5 при помощи ImageMinimizerPlugin получаю ошибку

введите сюда описание изображения

Конфиг webpack

export default {
...
module: {
  rules: [
    ...
    {
      test: /\.(png|jpe?g|gif|svg|webp|ico)$/i,
      type: "asset",
      generator: {
        filename: "assets/img/[hash][ext]",
      },
    },
  ]
}

Кроме type: "asset" пробовал "asset/recource" а также импорт картинок через file-loader, ошибка по итогу одна.

Генерация изображений

optimization: {
  usedExports: false,
  minimize: true,
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        mangle: false,
        compress: true,
        output: {
          beautify: true,
          comments: false,
        },
      },
      extractComments: false,
    }),

    new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminMinify,
        options: {
          // Lossless optimization with custom option
          // Feel free to experiment with options for better result for you
          plugins: [
            ["gifsicle", { interlaced: true }],
            ["jpegtran", { progressive: true }],
            ["optipng", { optimizationLevel: 5 }],
            // Svgo configuration here https://github.com/svg/svgo#configuration
            [
              "svgo",
              {
                plugins: [
                  {
                    name: "preset-default",
                    params: {
                      overrides: {
                        removeViewBox: false,
                        addAttributesToSVGElement: {
                          params: {
                            attributes: [
                              { xmlns: "http://www.w3.org/2000/svg" },
                            ],
                          },
                        },
                      },
                    },
                  },
                ],
              },
            ],
          ],
        },
      },
    }),
  ],
},

Картинку в компоненте импортирую так

import React from "react";
const imageSrc = require("./test.jpg");

export default function Start() {
  return <img src={String(imageSrc)} />
}

Тут пробовал импорт и через import img from "./test.jpg", ошибка по итогу всегда такая же

конфиг package.json

{
  "name": "st2",
  "version": "1.0.0",
  "main": "src/index.tsx",
  "type": "module",
  "config": {
    "dev": "--config webpack/dev.config.js",
    "prod": "--config webpack/prod.config.js"
  },
  "scripts": {
    "start": "webpack serve",
    "dev": "cross-env-shell NODE_ENV=development webpack serve ${npm_package_config_dev}",
    "build": "cross-env-shell NODE_ENV=production webpack ${npm_package_config_prod}"
  },
  "author": "",
  "license": "",
  "description": "",
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-typescript"
    ]
  },
  "browserslist": {
    "production": [
      "> 1%",
      "last 1 version",
      "not dead"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.24.6",
    "@babel/preset-env": "^7.24.6",
    "@babel/preset-react": "^7.24.6",
    "@babel/preset-typescript": "^7.24.6",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "babel-loader": "^9.1.3",
    "clean-webpack-plugin": "^4.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^7.1.2",
    "html-loader": "^5.0.0",
    "html-webpack-plugin": "^5.6.0",
    "image-minimizer-webpack-plugin": "^4.0.1",
    "imagemin": "^9.0.0",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-jpegtran": "^7.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-svgo": "^11.0.0",
    "mini-css-extract-plugin": "^2.9.0",
    "postcss-loader": "^8.1.1",
    "postcss-preset-env": "^9.5.14",
    "sass": "^1.77.4",
    "sass-loader": "^14.2.1",
    "style-loader": "^4.0.0",
    "typescript": "^5.4.5",
    "typescript-plugin-css-modules": "^5.1.0",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4",
    "webpack-merge": "^5.10.0"
  }
}

Без попытки сжатия изображения сборка проходит без ошибок.


Ответы (1 шт):

Автор решения: Vitaly

Мне ответили в репозитории плагина image minimizer plugin

https://github.com/webpack-contrib/image-minimizer-webpack-plugin/issues/443

Ошибка была в одной из библиотек плагина, для решения проблемы необходимо обновить плагин до версии 4.0.2

→ Ссылка