Generated SVG is not added to spritemap chunk

Hello!

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) => {
    webpack({
        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');

        expect(iconsChunk).toBeDefined();
        expect(iconsChunk.files.has('icons.js')).toBeTruthy();
        expect(iconsChunk.files.has('spritemap.svg')).toBeTruthy();
        done();
    });
});

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

  System:
    OS: Windows 10 10.0.19044
  Binaries:
    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
  npmPackages:
    @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

[martinbroos]

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 👍

[cascornelissen]

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.