svg-sprite-loader icon indicating copy to clipboard operation
svg-sprite-loader copied to clipboard

Webpack 5! Is svg-sprite-loader compatible with Webpack 5?

Open Borovensky opened this issue 3 years ago • 5 comments

Webpack 5! Is svg-sprite-loader compatible with Webpack 5? I update my application from 4 to 5 webpack and seems sprite stop working properly. svg-sprite-loader is not generated symbol anymore, instead I got this data data:image/svg+xml;base64

Current behavior I receive this as output: Screenshot from 2022-01-14 15-13-03

Expected behavior With webpack 4 I have this: Screenshot from 2022-01-14 13-01-04

This is a part of my webpack config Screenshot from 2022-01-14 15-35-32

environment:

  • Node.js version: 12.17.0
  • React version: 17.0.2
  • webpack version: 5.66.0
  • svg-sprite-loader version: 6.0.11
  • OS type & version: Ubuntu

I tried many cases and config changes...but with no success. I don't know even to what I should pay attention, because there are no visible errors while building the app. also there is no info in readme regarding webpack5.

I would really appreciate any help. Thanks.

Borovensky avatar Jan 14 '22 13:01 Borovensky

Here #470 I posted diff that also adds webpack@5 support.

chrisands avatar Jan 14 '22 22:01 chrisands

Hi @chrisands. Thanks. I will check it out.

Borovensky avatar Jan 17 '22 08:01 Borovensky

Set Rule.type to javascript/auto works for me.

image

luckydrq avatar Jan 13 '23 07:01 luckydrq

Set Rule.type to javascript/auto works for me.

image

seems work for me too

EricHan0723 avatar Feb 06 '23 07:02 EricHan0723

Set Rule.type to javascript/auto works for me.

image

This needs to be added to the documentation. I searched for this solution almost an entire day. Is it a webpack or a loader specific config? In my case, i was doing a require.context for the svgs and importing them all from a folder. Before i upgraded webpack, i was getting actual modules but after the upgrade i was just getting strings

const requireContext = require.context('./assets/svg', true, /\.svg$/)
requireContext.keys().forEach(requireContext)

uglu avatar Mar 09 '23 13:03 uglu