Hash output filename?

[bensampaio]

Hash output filename?

[bensampaio]

This is something I could add to the documentation. I'm happy you could fix the problem in the end and that it made sense. I'll close the issue and add this to my todos :)

[bensampaio]

@mnpenner interpolateName is already being used. You should be able to specify a name / path with a hash. If that's not working could you please show me what's the path you are using?

[mnpenner]

Thanks for responding.

Here's how I configured the loader:

{
    loader: 'external-svg-sprite?name=[name]-[sha1:hash:hex:10].[ext]',
    test: /\.svg$/,
    include: path.resolve(assetsDir, 'icons'),
},

Which is exactly the same way I configured my url-loader. However, I get this error when I try to set the name option that way:

Error: Module build failed: TypeError: Cannot read property '0' of null
    at new SvgSprite (C:\Users\Mark\PhpstormProjects\project\node_modules\external-svg-sprite-loader\lib\SvgSprite.js:41:87)
    at Function.getSprite (C:\Users\Mark\PhpstormProjects\project\node_modules\external-svg-sprite-loader\lib\SvgStorePlugin.js:53:35)
    at imagemin.buffer.then (C:\Users\Mark\PhpstormProjects\project\node_modules\external-svg-sprite-loader\index.js:70:41)
    at DependenciesBlock.onModuleBuildFailed (C:\Users\Mark\PhpstormProjects\project\node_modules\webpack-core\lib\NormalModuleMixin.js:315:19)
    at nextLoader (C:\Users\Mark\PhpstormProjects\project\node_modules\webpack-core\lib\NormalModuleMixin.js:270:31)
    at C:\Users\Mark\PhpstormProjects\project\node_modules\webpack-core\lib\NormalModuleMixin.js:292:15
    at context.callback (C:\Users\Mark\PhpstormProjects\project\node_modules\webpack-core\lib\NormalModuleMixin.js:148:14)
    at imagemin.buffer.then.catch (C:\Users\Mark\PhpstormProjects\project\node_modules\external-svg-sprite-loader\index.js:86:13)

Works fine when I use a static name like "spritemap.svg".

I will try to dig a bit deeper to see where it's breaking.

---

It's breaking in SvgSprite.js:

class SvgSprite {

    /**
     * Initializes all sprite properties.
     * @param {string} resourcePath - the relative path for the sprite based on the output folder.
     */
    constructor(resourcePath) {
        const name = path.basename(resourcePath).match(/(?!\[[^[\]]*)\w+(?![^[\]]*])/)[0]; // <-- crashes here

resourcePath is [name]-[sha1:hash:hex:10].[ext] and the .match is returning null.

[mnpenner]

OK, I just realized I shouldn't have used [name] and [ext] in my name. It makes sense for url/file-loader because we have an input file to which those things refer, but external-svg-sprite-loader is creating a brand new image so those values aren't set.

It works fine with sprite-[sha1:hash:hex:10].svg, which is all I wanted. Sorry for wasting your time :-)

You can close this ticket unless you want to put in better error-handling for dummies like me.