Svg-sprite-loader: Use webpack@2 RuleSet to match rules

[sqal]

Do you want to request a feature, report a bug or ask a question?
Bug

What is the current behavior?
Loader throws this error:

C:\dev\svg-sprite-loader-bug-repro\node_modules\svg-sprite-loader\lib\utils\get-loader-options.js:25
    options = multiRule.map(normalizeRule).find(r => loaderPath.includes(r.loader)).options;
                                                                                   ^

TypeError: Cannot read property 'options' of undefined
    at getLoaderOptions (C:\dev\svg-sprite-loader-bug-repro\node_modules\svg-sprite-loader\lib\utils\get-loader-options.j
s:25:84)

What is the expected behavior?
No error and project to be built

Steps to reproduce:

• clone repo https://github.com/sqal/svg-sprite-loader-bug-repro
• npm run build to see the error

This bug occurrs ONLY in the following setup:

• loader rule is inside of use array
• use rules.oneOf configuration
• extract option set to true
• plainSprite option set to true

Please tell us about your environment:

• Node.js version: 8.5.0
• webpack version: 3.8.1
• svg-sprite-loader version: 3.4.0
• OS type & version: Windows 10

[kisenka]

@sqal thanks a lot for reporting!

Looks like it's time to drop webpack-1 support and use introduced in webpack-2 RuleSet utility to test/match rules. It's a breaking change and requires some time.
My answer is: it will be fixed in next major version when I replace my own rule matcher with similar from webpack's core. For now I don't want to spend time to supporting my own rule matcher which actually is an ugly hack.
@sqal I believe that you webpack config could be rewritten to not raise any errors, right?

[sqal]

@sqal I believe that you webpack config could be rewritten to not raise any errors, right?

Hi and thanks for looking into this issue. Yes, for now i can drop rule.oneOf configuration or just don't use extract option and let loader inject my SVGs at runtime, I don't have problem with that :) So if you need to introduce a breaking change in order to fix this issue, then let it be, i don't mind waiting :)

[kisenka]

@sqal fixed in [email protected]

[raduflp]

this issue has resurfaced in my case after upgrading from 3.9.x to 4.1.1
my config looks something along the lines

...
module: {
  rules: [
    {
      oneOf: [
        ...
        {
           test: /\.svg$/,
           include: [/icons/],
           loader: "svg-sprite-loader",
           options: { extract: true }
         },
         ...
      ]
    }
  ]
}

looking at the recent webpack docs examples { oneOf: [ /* rules */ ] }, should be a valid rule.

@kisenka any thoughts?

[kisenka]

@raduflp I need a demo

[raduflp]

here's an updated version of sqal's demo https://github.com/raduflp/svg-sprite-loader-bug-repro

[sqal]

@kisenka I have the same issue as @raduflp after updating to the 4.1.1. You can use his reproduction to investigate the issue.

Logs:

```terminal
TypeError: Cannot read property 'options' of undefined
at module.exports (C:\dev\Github\svg-sprite-loader-bug-repro\node_modules\svg-sprite-loader\lib\utils\get-matched-rule.js:12:15)
at SVGSpritePlugin.apply (C:\dev\Github\svg-sprite-loader-bug-repro\node_modules\svg-sprite-loader\lib\plugin.js:65:18)
at webpack (C:\dev\Github\svg-sprite-loader-bug-repro\node_modules\webpack\lib\webpack.js:47:13)
at processOptions (C:\dev\Github\svg-sprite-loader-bug-repro\node_modules\webpack-cli\bin\cli.js:441:16)
at yargs.parse (C:\dev\Github\svg-sprite-loader-bug-repro\node_modules\webpack-cli\bin\cli.js:536:3)
at Object.parse (C:\dev\Github\svg-sprite-loader-bug-repro\node_modules\yargs\yargs.js:563:18)
at C:\dev\Github\svg-sprite-loader-bug-repro\node_modules\webpack-cli\bin\cli.js:219:8
at Object. (C:\dev\Github\svg-sprite-loader-bug-repro\node_modules\webpack-cli\bin\cli.js:538:3)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (C:\dev\Github\svg-sprite-loader-bug-repro\node_modules\webpack\bin\webpack.js:155:2)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:279:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:752:3)
````

btw. I noticed that unit test that supposed to test this setup was deleted in this commit, maybe it should be reinstated?

https://github.com/kisenka/svg-sprite-loader/commit/9418920038e72db1b88ab0bd24552420a8a3894d#diff-94ddd23a53d918ba243886e5b60a78afL440

[sqal]

Ohh I see there's PR fixing this issue https://github.com/kisenka/svg-sprite-loader/pull/316 :D

[ogonkov]

Looks like regression was introduced in 4.0.0

[sam3d]

I'm getting exactly the same issue on 4.1.3:

 ERROR  TypeError: Cannot read property 'options' of undefined
TypeError: Cannot read property 'options' of undefined
    at module.exports (/Users/me/Documents/Projects/personal/vue-svg/node_modules/svg-sprite-loader/lib/utils/get-matched-rule.js:13:15)
    at SVGSpritePlugin.apply (/Users/me/Documents/Projects/personal/vue-svg/node_modules/svg-sprite-loader/lib/plugin.js:65:18)

Any updates on this?