SVG loading - v5.0.0-beta.7

[frankykubo]

Version

5.0.0-beta.7

Environment info

npmPackages:
    @vue/cli-overlay:  5.0.0-beta.7 (4.5.4)
    @vue/cli-plugin-babel: 5.0.0-beta.7 => 5.0.0-beta.7 (4.5.4)
    @vue/cli-plugin-eslint: 5.0.0-beta.7 => 5.0.0-beta.7
    @vue/cli-plugin-router: 5.0.0-beta.7 => 5.0.0-beta.7 (4.5.4)
    @vue/cli-plugin-typescript: 5.0.0-beta.7 => 5.0.0-beta.7
    @vue/cli-plugin-vuex: 5.0.0-beta.7 => 5.0.0-beta.7 (4.5.4)
    @vue/cli-service: 5.0.0-beta.7 => 5.0.0-beta.7 (4.5.4)
    typescript: ~4.3.5 => 4.3.5
    vue: ^3.2.20 => 3.2.20 (2.6.14, 3.0.0-rc.7)
    vue-loader: ^16.8.2 => 16.8.2 (15.9.8, 16.0.0-beta.5, 15.9.3)
    vue-svg-loader: ^0.17.0-beta.2 => 0.17.0-beta.2

Steps to reproduce

1. Install Vue 3 + typescript
2. Update @vue-cli version to v5.0.0-beta.7
3. Install vue-svg-loader v0.17.0-beta.2
4. Edit vue.config.js:

chainWebpack: (config) => {
        const svgRule = config.module.rule('svg');
        console.log(svgRule)
        console.log('\n\n\n\n\n')
        svgRule.uses.clear();
        svgRule
            .use('vue-loader')
            .loader('vue-loader')
            .end()
            .use('vue-svg-loader')
            .loader('vue-svg-loader');
}

5. Import SVG and use as Vue component: Test.vue

 <template>
    <Svg />
</template>
<script lang="ts">
   import Svg from '@/assets/images/svgs/test.svg'
   export default defineComponent({
       name: 'Test',
       components: {Svg},
});
</script>

What is expected?

Load SVG as components without error.

What is actually happening?

Vue compiling without error, but when I open for example page on devServer, console throws error:

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/img/svg-name.7081c67c..svg') is not a valid name.
    at createElement (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:170:19)
    at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3879:29)
    at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3867:13)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3787:21)
    at mountChildren (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3977:13)
    at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3886:17)
    at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3867:13)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3787:21)
    at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4326:21)
    at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:197:29)

---

I suspect, it has something to do with this feature: #6771
As I am not that experienced programmer to debug this, I ask you for help. Thank you.

[haoqunjiang]

Add the following lines:

svgRule.delete('type');
svgRule.delete('generator');

after svgRule.uses.clear();

[frankykubo]

Add the following lines:

svgRule.delete('type');
svgRule.delete('generator');

after svgRule.uses.clear();

That fixes the issue. Thank you.

[tveimo]

THANK YOU SIR!

Now I just need to try to work in the three hours i lost trying to fix this.

[linghengqian]

• I think this issue should be closed as this is actually an issue with vue-svg-loader:0.17.0-beta.2. They did not update the documentation as follows.

module.exports = {
   chainWebpack: config => {
     const svgRule = config.module.rule('svg');
     svgRule.uses.clear();
     svgRule.delete('type');
     svgRule.delete('generator');
    // If you're using Vue Cli V5, you don't need to use `vue-loader-v16:16.0.0-beta.5.4` as the documentation for `vue-svg-loader:0.17.0-beta.2` mentions.
     svgRule
       .use('vue-loader')
       .loader('vue-loader')
       .end()
       .use('vue-svg-loader')
       .loader('vue-svg-loader');
   },
};