Giters

svg-sprite / svg-sprite

SVG sprites & stacks galore — A low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types along with suitable stylesheet resources (e.g. CSS, Sass, LESS, Stylus, etc.)

Home Page:https://github.com/svg-sprite/svg-sprite

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

beta-4: TypeError: Cannot read property 'distribute' of undefined

christopher-francisco opened this issue · comments

commented

I updated svg-sprite from 1.5.3 to 2.0.0-beta4. I didn't do anything else and I see this error. I am happy to provide a codepen if necessary, I just thought I'd reach out in case I'm missing something obvious.

svg-sprite@2.0.0-beta4/node_modules/svg-sprite/lib/svg-sprite/queue.js:92
        this._spriter._shapes.push(...shape.distribute());
                                            ^

TypeError: Cannot read property 'distribute' of undefined
    at SVGSpriterQueue.remove

Also worth mentioning I'm new to the library, it's in a project I inherited, and I've been reading the docs for 1.5.3 the release notes with the breaking changes, and docs for beta4. From those notes it didn't seem there was anything breaking other than the JSON format of the svgo plugins, but it doesn't seem that's the cause of the error.

Thanks in advance!

commented

Nevermind I'm an idiot:

I had tried to console.log the plugins in node_modules/svgo/lib/svgo.js so that I could know what plugins to configure on svg-sprite@2.0.0-beta4 config file, in order to have the exact same output than version 1.5.3.

Turns out I made a type error in my hacked console.log statement causing the issue...

commented

This error:

TypeError: Cannot read properties of undefined (reading 'distribute')
    at SVGSpriterQueue.remove (/myproject/node_modules/svg-sprite/lib/svg-sprite/queue.js:91:45)

seems to show up if you have any misconfiguration in your svgo settings, which makes troubleshooting what the real error is pretty tough.

For example, it shows up for me when I add:

shape: {
    transform: [
      {
        svgo: {
          plugins: [
            {
              active: true,
              name: 'removeAttributes',
              params: {attrs: ['mask:fill']}
            },
         ]
       }
     }
   ]
}

Turned out I had a typo. Should have been been removeAttrs instead of removeAttributes.

@jkphl Is there any way to improve that behaviour (so that we get the actual svgo config error)?