Vue-svg-loader: svgRule is undefined with Nuxt 2.0

[leopoldkristjansson]

I'm trying to use vue-svg-loader with Nuxt 2.0. I am using vue-svg-loader 0.10.0

In the nuxt.config.js I've added the recommended code:

    extend(config, ctx) {
      // Run ESLint on save
      const svgRule = config.module.rules.find(rule => rule.loader === 'url-loader');

      svgRule.test = /\.(png|jpe?g|gif)$/;

      config.module.rules.push({
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      });

      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
          options: {
            fix: true
          }
        })
      }
    }

But the svgRule is undefined...

TypeError: Cannot set property 'test' of undefined

I was using the same setup with Nuxt 1.0 and vue-svg-loader 0.8.0. That worked fine.

[rohankvats]

+1

[manniL]

Instead of checking whether it's the URL loader or not, filter for all rules containing "svg":

           config.module.rules
                .filter(rule => rule.test && /svg/.test(rule.test.toString()))
                .forEach(rule => {
                    rule.test = /\.(png|jpe?g|gif)$/
                })

            config.module.rules.push({
                test: /\.svg$/,
                loader: 'vue-svg-loader'
            })

[visualfanatic]

@leopoldkristjansson I updated all examples and tested them against Next.js 1.x and 2.x, everything should work now as expected on both major versions.

[rohankvats]

@manniL Thank you ! <3

[manniL]

https://github.com/Developmint/nuxt-svg-loader might help as well :relaxed: