-
- Notifications
You must be signed in to change notification settings - Fork 6.3k
Open
Labels
Description
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: #6771
As I am not that experienced programmer to debug this, I ask you for help. Thank you.
kyumoon and avenmore