Example interop-with-html-webpack-plugin not working with html-webpack-plugin v4.3.0

[igordos]

Code in template.ejs not working with html-webpack-plugin v4.3.0, but working with v3.2.0.

<% if (htmlWebpackPlugin.files.sprites) { %>
  <% for (var spriteFileName in htmlWebpackPlugin.files.sprites) { %>
    <%= htmlWebpackPlugin.files.sprites[spriteFileName] %>
  <% } %>
<% } %>

• Node.js version: 12.16.1
• webpack version: 4.43.0
• svg-sprite-loader version: 5.0.0
• OS type & version: Windows 10

Can you update code for new version? Thank you.

[sqal]

Yeah, I ran into the same issue. As a workaround you can use this snippet to inject your SVGs instead of the old one:

<%= compilation.assets["sprite.svg"].source() %>

[quasarchimaere]

I am currently also running into this issue, however the approach of @sqal does not work for me since my sprite contains a contenthash (or i am missing some webpack.conf parameters), can someone help me out here?

• webpack.config.ts
• template.ejs <- this template still contains the old interop code we used to use

[quasarchimaere]

I am currently also running into this issue, however the approach of @sqal does not work for me since my sprite contains a contenthash (or i am missing some webpack.conf parameters), can someone help me out here?

• webpack.config.ts
• template.ejs <- this template still contains the old interop code we used to use

i am still searching for a working solution for this issue, is there a new way to do this now? @kisenka

[rjeny]

@quasarchimaere as I see your config, you set plainSprite: true in SpriteLoaderPlugin, so you will only have sprite.svg and code below will work.

But if it`s not a truth, ask yourself a question: you want to hash objets, that you want to be inlined. For what?)

p.s. Sorry if i wrong at all, I am just trying to help)

[quasarchimaere]

@rjeny i will try the approach you suggested and will get back to you on that, i see your point, inlining the sprite makes the hash useless. I think inlining would just be a workaround for me anyway, what i actually would have liked to achieve is to include (and preload) the hashed spritesheet in the template/index.html -> similar to the js and css resources in our project.

To clarify, this issue that we are having is not that the sprite doesnt work to begin with (svg icons are visible on our spa) however, the network traffic and visible delay, shows that the sprite is (re)fetched on each page change, which isnt really ideal imho