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

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?

CodePudding user response：

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");
  },
};