SVG loading - v5.0.0-beta.7

frankykubo commented 3 years ago

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

Install Vue 3 + typescript
Update @vue-cli version to v5.0.0-beta.7
Install vue-svg-loader v0.17.0-beta.2

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');
}

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: https://github.com/vuejs/vue-cli/pull/6771 As I am not that experienced programmer to debug this, I ask you for help. Thank you.

haoqunjiang commented 3 years ago

Add the following lines:

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

after svgRule.uses.clear();

frankykubo commented 3 years ago

Add the following lines:
svgRule.delete('type');
svgRule.delete('generator');
after svgRule.uses.clear();

That fixes the issue. Thank you.

tveimo commented 2 years ago

THANK YOU SIR!

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

linghengqian commented 2 years ago

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

vuejs / vue-cli