Svg-sprite-loader: Problem with extracting SVG's

[Alex-Sokolov]

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

What is the current behavior?
Files not extracted

What is the expected behavior?
Files extracted to sprite file & returned as link, not module

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code.

• Install latest @vue/cli (for now v3.0.0-beta.15) and create project
• By default project use file-loader for SVG
• Create vue.config.js in root folder for overwriting rule:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .use('file-loader')
      .loader('svg-sprite-loader')
      .options({
        extract: true,
        spriteFilename: 'testtest.svg'
      })

    config.plugin('svg-sprite-loader-plugin').use(require('svg-sprite-loader/plugin'), [
      {
        plainSprite: true
      }
    ])
  }
}

• Run project npm run serve

Please tell us about your environment:

• Node.js version: 10.4.0
• webpack version: 4.11.1
• svg-sprite-loader version: 3.8.0
• OS type & version: OS X 10.13.5

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

1. Build crashed, when failed getLoaderOptions function. In line 26 get-loader-options.js if .find don't find anything — it will return undefined and later trying to access option property from undefined:

// now
options = rules.map(normalizeRule).find(r => loaderPath.includes(r.loader)).options;

// possible fix
const loaderRule = rules.map(normalizeRule).find(r => loaderPath.includes(r.loader))
options = loaderRule && loaderRule.options ? loaderRule.options : {}

1. Other problem with getMatchedRule function. In get-matched-rule.js seems locating correct rule for svg-sprite-loader is a part of problem. By default latest rule will be eslint-rule and not have needed options. Seems like need to locate svg-sprite-loader rule another way:
   

For this webpack configuration with use syntax can access loader options like that:

// now
return matched[matched.length - 1]

// possible fix only for that project configuration
const svgLoader = matched
    .filter(item => item.use)
    .map(item => item.use.filter(l => l.loader === 'svg-sprite-loader'))
    .filter(item => item.length > 0)

return { use: svgLoader[0] }

P.S.: for inspecting webpack config there is another command: https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config

[kisenka]

@Alex-Sokolov sorry for delay and thanks for detailed report, but it will be more efficient if you create repo with package.json, webpack.config.js and minimal source files where I can reproduce a problem.

[vicvinc]

meet the same problem...
my environment is:
node : v8.11.3
webpack: 4.16.4
svg-sprite-loader: 3.8.0

my webpack config:

// plugin:
const SvgSpritePlugin = require("svg-sprite-loader/plugin");
plugins: [
  new SvgSpritePlugin()
]
// loader:
    {
        test: /\.svg$/,
        loader: "svg-sprite-loader",
        options: {
          extract: true,
          spriteFilename: "sprite-[hash:6].svg",
          publicPath: "/"
        }
      },

cmd error:

ℹ ｢wds｣: 404s will fallback to /index.html
/dev-fe/node_modules/svg-sprite-loader/lib/utils/get-loader-options.js:26
    options = rules.map(normalizeRule).find(r => loaderPath.includes(r.loader)).options;
                                                                               ^

TypeError: Cannot read property 'options' of undefined
    at getLoaderOptions (/dev-fe/node_modules/svg-sprite-loader/lib/utils/get-loader-options.js:26:80)

[wanecek]

As far as I can tell, this seems to be solved by upgraded to the latest version. Can anyone confirm? @kisenka :)