Odd behavior when generating a manifest file

[Thomas Deinhamer]

I'm generating multiple sprites with the following options:

{
    name: 'sprites/global.[hash:8].svg',
    iconName: '[name]',
}

{
    name: 'sprites/brand-one.[hash:8].svg',
    iconName: '[name]',
}

{
    name: 'sprites/brand-two.[hash:8].svg',
    iconName: '[name]',
}

In addition, I'm using webpack-assets-manifest to generate a manifest.json, which maps plain file names to generated, hashed file names. webpack-assets-manifest creates a file like this:

{
  "global.svg": "/static/sprites/global.bc0840f3.svg",
  "brand.svg": "/static/sprites/brand-one.b71064f3.svg"
}

The problem is that the contents of the manifest.json file contains only a single brand.svg entry, which is named wrong (should be sprites/brand-one.svg) and in addition to that, it lacks the file sprites/brand-two.svg.

I was not able to find out what the actual problem is, but could it be that external-svg-sprite-loader is emitting files in a not-so-optimal format or something similar?

The correct output of the manifest.json file would be:

{
  "sprites/global.svg": "/static/sprites/global.bc0840f3.svg",
  "sprites/brand-one.svg": "/static/sprites/brand-one.b71064f3.svg",
  "sprites/brand-two.svg": "/static/sprites/brand-one.b71064f3.svg"
}

Of course, this could also be a bug in webpack-assets-manifest, but I thought I may ask here first to be sure it's not a problem with external-svg-sprite-loader or my configuration or something. What is a bit confusing is the fact that the key in the manifest.json is called brand.svg and not brand-one.svg, which is weird, because brand.svg is not something I have configured anywhere at all.

[Thomas Deinhamer]

By the way, the sprite files are generated correctly.

[Thomas Deinhamer]

It seems that using a dash (-) in the name option is the problem.

The configs ...

{
    name: 'sprites/one.[hash:8].svg',
    iconName: '[name]',
}

{
    name: 'sprites/two.[hash:8].svg',
    iconName: '[name]',
}

{
    name: 'sprites/three.[hash:8].svg',
    iconName: '[name]',
}

are successfully used on the generated manifest.json ...

  "one.svg": "/static/sprites/one.baa8a64a.svg",
  "two.svg": "/static/sprites/two.7ba348af.svg",
  "three.svg": "/static/sprites/three.16fdbfb9.svg",

... but using sprites/brand-one.[hash:8].svg, sprites/brand-two.[hash:8].svg, etc. will be reduced to a single entry in the manifest.json file with the key brand.svg.

[Bruno Sampaio]

@thasmo I might be wrong but I don't see why this would be a problem with this package. Could you try to use https://www.npmjs.com/package/webpack-manifest-plugin and see if it results in the same behavior? I used it before and never had problems with it. I guess webpack-assets-manifest is using a regex somewhere that does not take dashes into account 🤔

[Thomas Deinhamer]

@bensampaio I've tried it with assets-webpack-plugin and it behaves similarly; it somehow ditches everything after a dash, including the dash. When not using a dash in the name it works fine.

[Bruno Sampaio]

@thasmo I looked into it and I think I might have found the source of the problem. Could you give it a try with the changes in: #60 and let me know if that works for you?

[Thomas Deinhamer]

@bensampaio That seems to fix it, awesome!

[Bruno Sampaio]

Cool! I'll see if I get it merged and release it this week :)

[Bruno Sampaio]

The fix is now merged and released so I'll close this issue. Thanks for reporting!