Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Generated SVG is not added to spritemap chunk

See original GitHub issue


I’m currently upgrading my project to the webpack v5 and I’ve noticed in another plugin’s output that generated SVG file is not added to the spritemap chunk.

I couldn’t find any related topics on the internet so I started debugging, and it turned out that the piece of code responsible for that part is never called during my webpack build.

I’ve downloaded the repo of your plugin and tried to spot the issue. I’ve written a test that checks if the SVG file is added to spritemap and it seems that it fails on a clean repo as well:

it('Should include spritemap inside generated chunk', (done) => {
        entry: path.resolve(__dirname, './webpack/index.js'),
        plugins: [
            new SVGSpritemapPlugin(path.resolve(__dirname, 'input/svg/single.svg'), {
                output: {
                    filename: 'spritemap.svg',
                    chunk: {
                        name: 'icons',
                sprite: {
                    prefix: false
    }, (error, stats) => {
        const iconsChunk = stats.compilation.namedChunks.get('icons');


If I move part of the code which should be responsible for that outside of compiler.hooks.make.tap subscription it passes but I’m not very familiar with webpack plugin development so I’m not sure if it can break something else… Is that a correct way of fixing it? Or maybe I’m missing something in configuration of plugin / webpack?

System information

    OS: Windows 10 10.0.19044
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
    @babel/preset-env: ^7.16.4 => 7.16.4
    @xmldom/xmldom: ^0.7.5 => 0.7.5
    babel-jest: ^27.3.1 => 27.3.1
    codecov: ^3.8.3 => 3.8.3
    cross-env: ^7.0.3 => 7.0.3
    del: ^6.0.0 => 6.0.0
    glob: ^7.2.0 => 7.2.0
    jest: ^27.3.1 => 27.3.1
    joi: ^17.4.2 => 17.4.2
    loader-utils: ^3.2.0 => 3.2.0
    lodash: ^4.17.21 => 4.17.21
    mini-svg-data-uri: ^1.4.3 => 1.4.3
    mkdirp: ^1.0.4 => 1.0.4
    svg-element-attributes: ^1.3.1 => 1.3.1
    svg4everybody: ^2.1.9 => 2.1.9
    svgo: ^2.8.0 => 2.8.0
    webpack: ^5.64.1 => 5.64.1
    webpack-cli: ^4.9.1 => 4.9.1
    webpack-merge: ^5.8.0 => 5.8.0
    webpack-sources: ^3.2.2 => 3.2.2

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

martinbrooscommented, Jun 20, 2022

Thanks for this, I was having the same issue when upgrading to webpack 5. For a while I just used the filename without content hash. I did notice that when using version 3.x with webpack 5 it did work. But either way version 4.4.1 fixes it 👍

cascornelissencommented, Jun 20, 2022

That’s good to hear, let’s hope it won’t break for anyone else 🤞🏼 I’ve just published version 4.4.1 which includes this fix.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Releases · cascornelissen/svg-spritemap-webpack-plugin
Generated spritemap SVG not being added to the chunk files correctly (#194); Patterns pointing directly to input files resulting in errors ...
Read more >
svg-spritemap-webpack-plugin - npm
This webpack plugin generates a single SVG spritemap containing multiple <symbol> elements from all .svg files in a directory. In addition ...
Read more >
Using sprites with dynamically generated SVG? - Stack Overflow
I am trying to take some existing javascript which generates SVG elements and use a sprite sheet instead of individual pngs.
Read more >
How to create and use an SVG Sprite - YouTube
In this video, we explore several different ways to create an SVG Sprite and how to use it within your code.0:00 Intro and...
Read more >
Workflow for creating SVG sprites with NPM scripts
js script gets executed by the NPM script embedsprite . Last but not least, we would also like to generated a demo page...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found