Svg-sprite-loader: Exception: 2 rules applies to svg

[katiasmet]

Do you want to request a feature, report a bug or ask a question?
Question, i guess.

What is the current behavior?
Compiling fails because of my svg.
Failed to compile.
./src/_assets/svg/twitter.svg
svg-sprite-loader exception. 2 rules applies to /Applications/MAMP/htdocs/launchpad/src/_assets/svg/twitter.svg
@ ./src/_js/script.js 1:0-53
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/_scss/style.scss ./src/_js/script.js ./src/index.html

Some snippets of the files can be found here: https://gist.github.com/katiasmet/d5a4cc15592e58f56678f475b29b3b6b

What is the expected behavior?
Same as the example of the browser-sprite. Inline svg and using it with .

Please tell us about your environment:

• Node.js version: v6.11.0
• webpack version: 3.0.0
• svg-sprite-loader version: 3.0.5 (svgo-loader: 1.2.1)
• OS type & version: OSX Sierra

I use the Webpack dev server.

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)
I tried different svg's so I don't think the svg is the problem. Maybe it's a conflict with the webpack dev server?

[coleturner]

I also came across this issue. I looked into the code and it appears to originate from matching the rules:

https://github.com/kisenka/svg-sprite-loader/blob/master/lib/utils/get-matched-rules.js#L10

With Webpack 2 you can apply loaders differently depending on the issuers, for example in CSS I use url and file loader, while using svg sprite loader for JS. I believe this would need to be accommodated when matching rules, or to remove this check altogether?

[kisenka]

@colepatrickturner thanks, 3.0.6 with your update is published.

[JimVercoelen]

I don't get it. Is this supposed to be solved at 3.0.6? Because I am facing the same problem using 3.0.6.

Can other rules cause this problem?

@katiasmet You managed to solve this problem? Because I am using the same config for this loader as you have.

[kisenka]

@JimVercoelen could you please check latest version?

[antongunkin]

Same problem...

[katiasmet]

@JimVercoelen I used another plugin for creating a external sprite.

https://github.com/mrsum/webpack-svgstore-plugin

[kisenka]

@katiasmet @antongunkin it will be very useful if some of you guys create git repo with reproducible error. In this way I will assist quickly :)

[thenickname]

In my case I found that this problem only occurs if I disable AMD modules in webpack. I use webpack 2.

Background: I disabled AMD module support in webpack, because it leads to lodash leaking into the global browser namespace.

While it solved the lodash issue, it instead lead to this "Exception: 2 rules applies to svg" warning.

The offending webpack config:

{
     parser : { amd: false }
},

Hope it does not add any more confusion. Maybe it helps...

[kisenka]

@katiasmet still actual?

[irodger]

I had same problem and it was a url-loader(for loading fonts for example) make base64 from svg. I solved this problem by exclude svg for url-loader.

[vercoelenmike]

@JimVercoelen @katiasmet @irodger

The problem here is that you are using more than 1 webpack rule for handling svg file types, so you prob. have a rule going for either images or fonts.

[anrn]

Is it possible to use more than one rule? I try to use this loader with webpacker 3 (it's ruby on rails gem) and you cannot really manage all rules and change settings easily in that case.

[anrn]

Is it possible to use more than one rule? I try to use this loader with webpacker 3 (it's ruby on rails gem), in that case you cannot really manage all rules and change prepared settings.

[kisenka]

@anrn this warning broke your compilation somehow?

[anrn]

@kisenka Yes, after warning I have an error:
Module build failed: InvalidSvg: svg-sprite-loader exception.
Other default loader didn't change anything in svg file, it just modified name with adding hash

[kisenka]

Dropped this silly warning in [email protected], please update!

[katiasmet]

@kisenka sorry for the late reply. But i managed to make it work :)

[chess99]

@vercoelenmike
thx.. i found myself forget to add 'exclude'.. lol

  {
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    include: [resolve('src/icons')],  //
    options: {
      symbolId: 'icon-[name]',
    }
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    exclude: [resolve('src/icons')],  // folders other than src/icons use url-loader
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },

[SteGreig]

@JimVercoelen @katiasmet @irodger

The problem here is that you are using more than 1 webpack rule for handling svg file types, so you prob. have a rule going for either images or fonts.

Does anyone know how I can fix this in a Gatsby project? After installing the gatsby-plugin-svg-sprite package, simply importing an SVG file into a component like this:

import icon from "../images/bars-regular.svg"

results in the following error:

Cannot find module 'webpack/package.json'

It sounds like I need to stop url-loader from processing my SVG icons that I want to be processed by gatsby-plugin-svg-sprite (svg-sprite-loader) but I can't see how to do this anywhere?