isSvg expects string but gets object (buffer) #62

jens-struct · 2024-05-09T17:36:24Z

There is an issue with the newest release: "imagemin-svgo" hands over a buffer object to "isSvg", which fails because it only works with strings.

ejtagle · 2024-05-13T02:18:14Z

I did a pull request to fix it, hope it gets accepted soon

jessehs · 2024-05-13T20:05:01Z

The changes in the PR appear to solve the issue for me as well.

Dmitriy-Frostoff · 2024-05-16T18:15:55Z

Whatsapp!) 👋
I've got similar exception to yours via imagemin v9.0.0 and imagemin-svgo v11.0.0 usage with Webpack 5 v5.91.0...

What were you expecting to happen?

I expected to get the minimized .svg and .gif files.

What actually happened?

I got 12 errors with main trouble consisting of Expected a 'string', got 'object'.

Please give us a sample of your webpack.config.js

My entire boilerplates are at:

The webpack.config.(js|ts) are at (cwd relative)
configs/webpack/webpack.config.(js|ts).

Terminal output / screenshots

The full log emited by Webpack 5 v5.91.0 via production mode bundle (development one works smoothly)

      $ npm run build
  > boilerplate-webpack-gulp-html-scss-js-components@1.0.0 build
  > webpack --config ./configs/webpack/webpack.config.js --node-env=production --progress

  assets by status 79.2 KiB [cached] 6 assets
  Entrypoint main = main.03f8.css main.3b77.js 2 auxiliary assets
  orphan modules 41.6 KiB (javascript) 997 bytes (runtime) [orphan] 11 modules
  cacheable modules 952 bytes (javascript) 8.23 KiB (css/mini-extract)
    ./projectName/src/index.js + 1 modules 952 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2]
  .use[3]!./projectName/src/app/styles/index.scss 8.23 KiB [built] [code generated]

  ERROR in Error with 'src/shared/assets/images/svg/footer/_active/rs_school_js_active.2503.svg': Expected a `string`, got `object`

  ERROR in Error with 'src/shared/assets/images/svg/footer/rs_school_js.e17f.svg': Expected a `string`, got `object`

  ERROR in Error with 'src/shared/assets/images/gif/github.30ae.gif': Expected a `string`, got `object`

  ERROR in   Error: Child compilation failed:
    Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):
    Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\gif\github.gif': Expected a `
    string`, got `object`
    ModuleError: Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):
    Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\gif\github.gif': Expected a `
    string`, got `object`
        at Object.emitError (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\webpack\lib\NormalModule.js:669:6)
        at Object.loader (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\image-minimizer-webpack-plugin\dist\loader.
    js:159:12)
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):
    Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\_active\github log
    o_active.svg': Expected a `string`, got `object`
    ModuleError: Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):
    Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\_active\github log
    o_active.svg': Expected a `string`, got `object`
        at Object.emitError (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\webpack\lib\NormalModule.js:669:6)
        at Object.loader (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\image-minimizer-webpack-plugin\dist\loader.
    js:159:12)
    Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):
    Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\_active\rs_school_
    js_active.svg': Expected a `string`, got `object`
    ModuleError: Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):
    Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\_active\rs_school_
    js_active.svg': Expected a `string`, got `object`
        at Object.emitError (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\webpack\lib\NormalModule.js:669:6)
        at Object.loader (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\image-minimizer-webpack-plugin\dist\loader.
    js:159:12)
    Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):
    Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\github logo.svg':
    Expected a `string`, got `object`
    ModuleError: Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):
    Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\github logo.svg':
    Expected a `string`, got `object`
        at Object.emitError (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\webpack\lib\NormalModule.js:669:6)
        at Object.loader (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\image-minimizer-webpack-plugin\dist\loader.
    js:159:12)
    Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):
    Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\rs_school_js.svg':
    Expected a `string`, got `object`
    ModuleError: Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):
    Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\rs_school_js.svg':
    Expected a `string`, got `object`
        at Object.emitError (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\webpack\lib\NormalModule.js:669:6)
        at Object.loader (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\image-minimizer-webpack-plugin\dist\loader.
    js:159:12)
    Error with 'src/shared/assets/images/svg/footer/_active/rs_school_js_active.2503.svg': Expected a `string`, got `object`
    Error: Error with 'src/shared/assets/images/svg/footer/_active/rs_school_js_active.2503.svg': Expected a `string`, got `object`
        at Object.imageminMinify [as implementation] (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\image-minimizer
    -webpack-plugin\dist\utils.js:576:22)
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
        at async worker (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\image-minimizer-webpack-plugin\dist\worker.j
    s:76:25)
        at async E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\image-minimizer-webpack-plugin\dist\index.js:326:18
    Error with 'src/shared/assets/images/svg/footer/rs_school_js.e17f.svg': Expected a `string`, got `object`
    Error: Error with 'src/shared/assets/images/svg/footer/rs_school_js.e17f.svg': Expected a `string`, got `object`
        at Object.imageminMinify [as implementation] (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\image-minimizer
    -webpack-plugin\dist\utils.js:576:22)
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
        at async worker (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\image-minimizer-webpack-plugin\dist\worker.j
    s:76:25)
        at async E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\image-minimizer-webpack-plugin\dist\index.js:326:18
    Error with 'src/shared/assets/images/gif/github.30ae.gif': Expected a `string`, got `object`
    Error: Error with 'src/shared/assets/images/gif/github.30ae.gif': Expected a `string`, got `object`
        at Object.imageminMinify [as implementation] (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\image-minimizer
    -webpack-plugin\dist\utils.js:576:22)
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
        at async worker (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\image-minimizer-webpack-plugin\dist\worker.j
    s:76:25)
        at async E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\image-minimizer-webpack-plugin\dist\index.js:326:18

    - NormalModule.js:669 Object.emitError
      [boilerplate-webpack-gulp-html-scss-js-components]/[webpack]/lib/NormalModule.js:669:6

    - loader.js:159 Object.loader
      [boilerplate-webpack-gulp-html-scss-js-components]/[image-minimizer-webpack-plugin]/dist/loader.js:159:12

    - task_queues:95 process.processTicksAndRejections
      node:internal/process/task_queues:95:5

    - Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):

    - Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\_active\github l
      ogo_active.svg': Expected a `string`, got `object`

    - ModuleError: Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):

    - Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\_active\github l
      ogo_active.svg': Expected a `string`, got `object`

    - NormalModule.js:669 Object.emitError
      [boilerplate-webpack-gulp-html-scss-js-components]/[webpack]/lib/NormalModule.js:669:6

    - loader.js:159 Object.loader
      [boilerplate-webpack-gulp-html-scss-js-components]/[image-minimizer-webpack-plugin]/dist/loader.js:159:12

    - Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):

    - Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\_active\rs_schoo
      l_js_active.svg': Expected a `string`, got `object`

    - ModuleError: Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):

    - Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\_active\rs_schoo
      l_js_active.svg': Expected a `string`, got `object`

    - NormalModule.js:669 Object.emitError
      [boilerplate-webpack-gulp-html-scss-js-components]/[webpack]/lib/NormalModule.js:669:6

    - loader.js:159 Object.loader
      [boilerplate-webpack-gulp-html-scss-js-components]/[image-minimizer-webpack-plugin]/dist/loader.js:159:12

    - Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):

    - Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\github logo.svg'
      : Expected a `string`, got `object`

    - ModuleError: Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):

    - Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\github logo.svg'
      : Expected a `string`, got `object`

    - NormalModule.js:669 Object.emitError
      [boilerplate-webpack-gulp-html-scss-js-components]/[webpack]/lib/NormalModule.js:669:6

    - loader.js:159 Object.loader
      [boilerplate-webpack-gulp-html-scss-js-components]/[image-minimizer-webpack-plugin]/dist/loader.js:159:12

    - Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):

    - Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\rs_school_js.svg
      ': Expected a `string`, got `object`

    - ModuleError: Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):

    - Error with 'E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\projectName\src\shared\assets\images\svg\footer\rs_school_js.svg
      ': Expected a `string`, got `object`

    - NormalModule.js:669 Object.emitError
      [boilerplate-webpack-gulp-html-scss-js-components]/[webpack]/lib/NormalModule.js:669:6

    - loader.js:159 Object.loader
      [boilerplate-webpack-gulp-html-scss-js-components]/[image-minimizer-webpack-plugin]/dist/loader.js:159:12

    - Error with 'src/shared/assets/images/svg/footer/_active/rs_school_js_active.2503.svg': Expected a `string`, got `object`

    - Error: Error with 'src/shared/assets/images/svg/footer/_active/rs_school_js_active.2503.svg': Expected a `string`, got `object`

    - utils.js:576 Object.imageminMinify [as implementation]
      [boilerplate-webpack-gulp-html-scss-js-components]/[image-minimizer-webpack-plugin]/dist/utils.js:576:22

    - task_queues:95 process.processTicksAndRejections
      node:internal/process/task_queues:95:5

    - worker.js:76 async worker
      [boilerplate-webpack-gulp-html-scss-js-components]/[image-minimizer-webpack-plugin]/dist/worker.js:76:25

    - index.js:326
      [boilerplate-webpack-gulp-html-scss-js-components]/[image-minimizer-webpack-plugin]/dist/index.js:326:18

    - Error with 'src/shared/assets/images/svg/footer/rs_school_js.e17f.svg': Expected a `string`, got `object`

    - Error: Error with 'src/shared/assets/images/svg/footer/rs_school_js.e17f.svg': Expected a `string`, got `object`

    - utils.js:576 Object.imageminMinify [as implementation]
      [boilerplate-webpack-gulp-html-scss-js-components]/[image-minimizer-webpack-plugin]/dist/utils.js:576:22

    - task_queues:95 process.processTicksAndRejections
      node:internal/process/task_queues:95:5

    - worker.js:76 async worker
      [boilerplate-webpack-gulp-html-scss-js-components]/[image-minimizer-webpack-plugin]/dist/worker.js:76:25

    - index.js:326
      [boilerplate-webpack-gulp-html-scss-js-components]/[image-minimizer-webpack-plugin]/dist/index.js:326:18

    - Error with 'src/shared/assets/images/gif/github.30ae.gif': Expected a `string`, got `object`

    - Error: Error with 'src/shared/assets/images/gif/github.30ae.gif': Expected a `string`, got `object`

    - utils.js:576 Object.imageminMinify [as implementation]
      [boilerplate-webpack-gulp-html-scss-js-components]/[image-minimizer-webpack-plugin]/dist/utils.js:576:22

    - task_queues:95 process.processTicksAndRejections
      node:internal/process/task_queues:95:5

    - worker.js:76 async worker
      [boilerplate-webpack-gulp-html-scss-js-components]/[image-minimizer-webpack-plugin]/dist/worker.js:76:25

    - index.js:326
      [boilerplate-webpack-gulp-html-scss-js-components]/[image-minimizer-webpack-plugin]/dist/index.js:326:18

    - child-compiler.js:174
      [boilerplate-webpack-gulp-html-scss-js-components]/[html-webpack-plugin]/lib/child-compiler.js:174:18

    - Compiler.js:605 finalCallback
      [boilerplate-webpack-gulp-html-scss-js-components]/[webpack]/lib/Compiler.js:605:5

    - Compiler.js:640
      [boilerplate-webpack-gulp-html-scss-js-components]/[webpack]/lib/Compiler.js:640:11

    - Compiler.js:1329
      [boilerplate-webpack-gulp-html-scss-js-components]/[webpack]/lib/Compiler.js:1329:17


    - task_queues:95 process.processTicksAndRejections
      node:internal/process/task_queues:95:5

Please provide the following information:

OS & version [e.g. MacOS Catalina 10.15.4]: Windows 10 Pro v1803 (i.e. Windows 10 v10.0.17134)
node version (run node -v): v21.7.1
npm version (run npm -v): 10.7.0
Webpack version (run npx webpack -v): 5.91.0
imagemin version: 9.0.0
imagemin-svgo: 11.0.0

(more details via package.json s at
boilerplate-webpack-gulp-html-scss-js-components
and
boilerplate-webpack-gulp-html-scss-ts-components
)

Steps to reproduce:

copy the boilerplate
install the dependencies
check out that the command

npm run html

works fine;

remove imagemin and imagemin-svgo via

npm un imagemin imagemin-svgo

install actual imagemin and imagemin-svgo packages via

npm i -D imagemin imagemin-svgo

run

npm run build

Additional information

The exceptions are emitted only via actual imagemin v9.0.0 and imagemin-svgo v11.0.0 usage, previous ones work fine.
I hope it'll help to find the problem...

jessehs · 2024-05-16T18:20:30Z

For what it's worth I don't believe that the PR actually fixed the problem for me. It solved the error message, but it looks like the SVG images were not actually getting optimized anymore. I ended up going a different route and no longer using this package, so I can't help on this issue any further. 🤷

Update is braking the filechecker. See: imagemin/imagemin-svgo#62

caugner · 2024-05-27T16:03:51Z

FWIW The v5 release notes of is-svg state:

It no longer accepts a Buffer.

To migrate, simply call .toString() on the buffer before passing it in here.

imagemin-svgo v11.0.0 incorrectly calls isSvg(), breaking the filechecker: See: imagemin/imagemin-svgo#62 Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com>

alexander-akait · 2024-06-04T17:22:42Z

For developers who uses https://github.com/webpack-contrib/image-minimizer-webpack-plugin, we allow directly usage svgo, so you can use https://github.com/webpack-contrib/image-minimizer-webpack-plugin?tab=readme-ov-file#optimize-with-svgo, also we support multiple minimizers, i.e. your configuration can be like:

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" }],
                    },
                  },
                },
              },
            },
          ],
        },
      },
    },
  ],
});

Dmitriy-Frostoff · 2024-06-05T10:27:21Z

For developers who uses https://github.com/webpack-contrib/image-minimizer-webpack-plugin, we allow directly usage svgo, so you can use https://github.com/webpack-contrib/image-minimizer-webpack-plugin?tab=readme-ov-file#optimize-with-svgo, also we support multiple minimizers, i.e. you configuration can be like:

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" }],
                    },
                  },
                },
              },
            },
          ],
        },
      },
    },
  ],
});

Alexander, you ' re great Wizard!)))) 🔮🔮🔮🔮🔮
Thank you a lot!))))
Would you have any mind if I copied your answer and paste it to my imagemin/imagemin#417 for next developers with same problem?

alexander-akait · 2024-06-05T12:12:43Z

@Dmitriy-Frostoff ⭐ Done

timmywil mentioned this issue May 20, 2024

Webpack 5 usage with imagemin and imagemin-svgo for .svg and .gif emits errors: Expected a 'string', got 'object' imagemin/imagemin#417

Closed

cgsunkel mentioned this issue May 22, 2024

Revert imagemin-svgo update uktrade/omis-frontend#555

Merged

fiji-flo added a commit to fiji-flo/yari that referenced this issue May 27, 2024

fix(filechecker): revert imagemin-svgo

4d8b459

Update is braking the filechecker. See: imagemin/imagemin-svgo#62

fiji-flo mentioned this issue May 27, 2024

fix(filechecker): revert imagemin-svgo mdn/yari#11201

Merged

alexander-akait mentioned this issue Jun 4, 2024

Error .jpg : Expected a string, got object webpack-contrib/image-minimizer-webpack-plugin#443

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

isSvg expects string but gets object (buffer) #62

isSvg expects string but gets object (buffer) #62

jens-struct commented May 9, 2024

ejtagle commented May 13, 2024 •

edited

jessehs commented May 13, 2024

Dmitriy-Frostoff commented May 16, 2024 •

edited

jessehs commented May 16, 2024

caugner commented May 27, 2024

alexander-akait commented Jun 4, 2024 •

edited

Dmitriy-Frostoff commented Jun 5, 2024

alexander-akait commented Jun 5, 2024

isSvg expects string but gets object (buffer) #62

isSvg expects string but gets object (buffer) #62

Comments

jens-struct commented May 9, 2024

ejtagle commented May 13, 2024 • edited

jessehs commented May 13, 2024

Dmitriy-Frostoff commented May 16, 2024 • edited

What were you expecting to happen?

What actually happened?

Please give us a sample of your webpack.config.js

Terminal output / screenshots

Please provide the following information:

Steps to reproduce:

Additional information

jessehs commented May 16, 2024

caugner commented May 27, 2024

alexander-akait commented Jun 4, 2024 • edited

Dmitriy-Frostoff commented Jun 5, 2024

alexander-akait commented Jun 5, 2024

ejtagle commented May 13, 2024 •

edited

Dmitriy-Frostoff commented May 16, 2024 •

edited

alexander-akait commented Jun 4, 2024 •

edited