Webpack v5: Plugin throws errors in v3.6.0

[markgaze]

The #webpack5 version fixed my issues but since switching to v3.6.0, I get this:

node_modules/svg-spritemap-webpack-plugin/svg4everybody-helper.js 30 bytes [built] [code generated]
node_modules/svg4everybody/dist/svg4everybody.js 6.03 KiB [built] [code generated]
spritemap-dummy-module 1 bytes [code generated]
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
webpack 5.3.0 compiled with 21 errors in 1522 ms

Config

Here's the section of the plugins array related to this package:

new SVGSpritemapPlugin('src/img/svg/*.svg', {
  output: {
    filename: '../../src/img/sprite.svg',
    svg4everybody: true,
    svgo: true
  },
  sprite: {
    generate: {
      title: false
    },
    prefix: false
  }
})

I've tried to change a few things to see if there was anything else causing it (as I've bumped a few other dependencies at the same time) but it seems like the update to v3.6.0 is the cause. Let me know if I can help you out with debugging this and I'll see what I can do.

[markgaze]

Just trying to get to the bottom of this and setting svg4everybody to false stops this error from showing ~but doesn't generate the SVG~, thought I'd log my updates 🙂

EDIT: The SVG does in fact, get generated

[markgaze]

~Hmm... I've just reworked my webpack config and now this error has gone away... I did uninstall another plugin so that might have been affecting things but still a bit confused about why changing svg4everybody to false fixed it earlier.~

~Feel free to close this unless you can recreate it, apologies for wasting your time!~

EDIT: Me again... Turns out it wasn't fixed and was just cached so I'm back to getting this issue in CI 😞

[cascornelissen]

Haha, no problem, I'm able to reproduce it using the following configuration. Let's see if we can also find a solution now 🕵🏼‍♂️.

new SVGSpritemapPlugin('src/**/*.svg', {
    output: {
        svg4everybody: true
    }
})

[cascornelissen]

I think I've found the issue, would you mind sharing your entire Webpack configuration to ensure I didn't miss anything? I'm especially interested in your entry (if you've defined it at all).

[markgaze]

I think I've found the issue, would you mind sharing your entire Webpack configuration to ensure I didn't miss anything? I'm especially interested in your entry (if you've defined it at all).

Awesome, thank you! It's a private project unfortunately but I'll anonymise it and stick it in this issue ASAP 🙂

The entry currently only has a bunch of .ts files and a couple of .scss files though.

[cascornelissen]

It's mainly about the structure of the entry value, there's handling for strings, arrays, and objects with different structures and I think you're using a specific type that's not correctly supported currently but I need to know what it looks like to test it 😅

[markgaze]

It's mainly about the structure of the entry value, there's handling for strings, arrays, and objects with different structures and I think you're using a specific type that's not correctly supported currently but I need to know what it looks like to test it 😅

It's an object that looks like this (I've changed the names of stuff but it's the same format so hopefully that works for you!):

entry: {
  componentA: './src/ts/componentA.ts',
  app: './site/static/js/app.js',
  'component-b': './src/ts/subdirectory/component-b.ts',
  'component-c': './src/ts/component-c.ts',
  componentD: './src/ts/componentD.ts',
  'component-e': './src/ts/component-e.ts',
  'component-f': './src/ts/component-f.ts',
  componentG: './src/ts/componentG.ts',
  'component-h': './src/ts/component-h.ts',
  'component-i': './src/ts/component-i.ts',
  'component-j': './src/ts/component-j.ts',
  'component-k': './src/ts/component-k.ts',
  'component-l': './src/ts/component-l.ts',
  'component-m': './src/ts/component-m.ts',
  'component-n': './src/ts/component-n.ts',
  componentO: './src/ts/componentO.ts',
  componentP: './src/ts/componentP.ts',
  componentQ: './src/ts/componentQ.ts',
  componentR: './src/ts/componentR.ts',
  'component-s': './src/ts/component-s.ts',
  'doc-site': './src/doc-site/scss/doc-site.scss',
  'site-style': './src/scss/site-style.scss'
},

[cascornelissen]

Awesome, that's indeed a format that appears to be broken. Fix coming right up :v:

[markgaze]

Awesome, that's indeed a format that appears to be broken. Fix coming right up ✌️

Legend! Thanks 😄

[cascornelissen]

This should be fixed in 3.6.1 which is now available under the next dist-tag on NPM.

$ npm install svg-spritemap-webpack-plugin@next

Please test this release out using both Webpack 4 and 5 if possible and report any problems.

[markgaze]

Fantastic, thank you! Will give it a go and let you know 😄

[markgaze]

Tested with Webpack 4 and 5 and I can confirm that it works with both 😄

Thanks for all your help with this, you're a lifesaver! ❤️

[cascornelissen]

Well, thanks for your help! It prevents a lot of stress and hassle if people test out a release before stamping the stable/latest label on it. ✌🏼