Vue svgs stopped working after upgrading vue-cli (vue-svg-loader)

Question

In our project we are using vue-svg-loader (latest version) with the following configuration file vue.config.js:

  const svgRule = config.module.rule('svg')
  svgRule.uses.clear()
  svgRule
    .use('babel-loader')
    .loader('babel-loader')
    .end()
    .use('vue-svg-loader')
    .loader('vue-svg-loader')
    .options({
      svgo: {
        plugins: [{ removeViewBox: false }]
      }
    })

unfortunately after upgrading our @vue/cli-service 5.0.4 from @vue/cli-service 3.4.0 everything works but our svgs, which are not loading any more with the following error:

[Vue warn]: Invalid Component definition: /public/img/island-small.3fa8ec4c.svg found in <ZnLogin> at src/pages/login/login.vue

I tried playing with the versions, variety of configurations (mostly the default one) and nothing seems to work. I do wish to keep the current usage method:

<template>
  <VueLogo/>
</template>
<script>
import VueLogo from './public/vue.svg';

export default {
  name: 'Example',
  components: {
    VueLogo,
  },
};
</script>

any idea?

Kevinksy · Accepted Answer · 2022-04-08 21:27:01Z

2

Check out this issue.

https://github.com/visualfanatic/vue-svg-loader/issues/185

Changing the vue configuration worked for me.

// vue.config.js

module.exports = {
  chainWebpack: (config) => {
    config.module.rules.delete("svg");
    config.module.rule("svg")
      .test(/\.(svg)(\?.*)?$/)
      .use("babel-loader")
      .loader("babel-loader")
      .end()
      .use("vue-svg-loader")
      .loader("vue-svg-loader");
  },
};

answered Apr 8, 2022 at 21:27

Kevinksy

361 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue svgs stopped working after upgrading vue-cli (vue-svg-loader)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related