webpack-contrib/image-minimizer-webpack-plugin

Error .jpg : Expected a `string`, got `object`

redRusUnstpbl opened this issue · 7 comments

redRusUnstpbl commented

When i use the image-minimizer-webpack-plugini, get an error

"ERROR in Error with '2149f2eb790fd4afc8f7.jpg': Expected a string, got object"

123

Everything works without a plugin. This is a clean project, I did everything according to the documentation

My webpack config

export default {
  ...
  module: {
    rules: [
      ...
      // --- IMG
      {
        test: /\.(png|jpe?g|gif|svg|webp|ico)$/i,
        type: "asset",
      }
    ]
  },
  optimization: {
    minimizer: [
      ...
      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" },
                              ],
                            },
                          },
                        },
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ],
  }
}

I tried different methods, "asset", "asset/recource", "asset/inline", "asset/source", "file-loader", but the error is always the same.

My test component with image

import React from "react";
import imageSrc from "./test.jpg";

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

My package.json

{
  "name": "sv_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": "vitaliy",
  "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",
    "file-loader": "^6.2.0",
    "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"
  }
}
alexander-akait commented

Hm, looks like something wrong with options, because imagemin doesn't validate them

alexander-akait commented

Investigate

redRusUnstpbl commented

@alexander-akait you can check my rep for investigation, I tried different options, but the error is always the same. Its clear project with only react, typescript and some loaders, without extra plugins.

https://github.com/redRusUnstpbl/sv_st1/

  • 👍1
alexander-akait commented

Found a problem, bug in imageminSvgo:

in imagemin-svgo, they expected it should be buffer or string

if (!isSvg(buffer)) {
  return buffer;
}

But in is-svg:

if (typeof string !== 'string') {
  throw new TypeError(`Expected a \`string\`, got \`${typeof string}\``);
}

So imagemin-svgo accepts string | Buffer, but is-svgo only string

weird, WIP on this

  • 👍1
alexander-akait commented

Okay, looks like imagemin-svgo is not compatibility with imagemin@9, but it is not a problem - let's use it directly, I will fix our docs, so after #444 merged (I want to do it today), please use this configuration:

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 }],
        ],
      },
    },
    {
      implementation: ImageMinimizerPlugin.svgoMinify,
      options: {
        encodeOptions: {
          // Pass over SVGs multiple times to ensure all optimizations are applied. False by default
          multipass: true,
          plugins: [
            {
              name: "preset-default",
              params: {
                overrides: {
                  removeViewBox: false,
                  addAttributesToSVGElement: {
                    params: {
                      attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],
                    },
                  },
                },
              },
            },
          ],
        },
      },
    },
  ],
});

There is an issue with imagemin-svgo - imagemin/imagemin-svgo#62, you faced with it, but I can't fix it here

alexander-akait commented

Please update https://github.com/webpack-contrib/image-minimizer-webpack-plugin/releases/tag/v4.0.2 and use configuration above, feel free to feedback

  • 👍2
redRusUnstpbl commented

@alexander-akait It work now, thx )

  • ❤️1