Vue SVG loader is not loading accurately

Question

I am having problem using svg loader. I tried to load file but it is giving me this error in console

runtime-dom.esm-bundler.js?830f:21 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/assets/twitter-brands.6620c8ae.svg') is not a valid name. at createElement (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:290:19) at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3910:29) at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3898:13) at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3818:21) at mountChildren (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4008:13) at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3917:17) at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3898:13) at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3818:21) at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4357:21) at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:195:29) createElement @ runtime-dom.esm-bundler.js?830f:21 mountElement @ runtime-core.esm-bundler.js?5c40:3771 processElement @ runtime-core.esm-bundler.js?5c40:3750 patch @ runtime-core.esm-bundler.js?5c40:3670 mountChildren @ runtime-core.esm-bundler.js?5c40:3869 mountElement @ runtime-core.esm-bundler.js?5c40:3778 processElement @ runtime-core.esm-bundler.js?5c40:3750 patch @ runtime-core.esm-bundler.js?5c40:3670 componentUpdateFn @ runtime-core.esm-bundler.js?5c40:4218 run @ reactivity.esm-bundler.js?a1e9:160 setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4337 mountComponent @ runtime-core.esm-bundler.js?5c40:4120 processComponent @ runtime-core.esm-bundler.js?5c40:4078 patch @ runtime-core.esm-bundler.js?5c40:3673 mountChildren @ runtime-core.esm-bundler.js?5c40:3869 processFragment @ runtime-core.esm-bundler.js?5c40:4037 patch @ runtime-core.esm-bundler.js?5c40:3666 componentUpdateFn @ runtime-core.esm-bundler.js?5c40:4218 run @ reactivity.esm-bundler.js?a1e9:160 setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4337 mountComponent @ runtime-core.esm-bundler.js?5c40:4120 processComponent @ runtime-core.esm-bundler.js?5c40:4078 patch @ runtime-core.esm-bundler.js?5c40:3673 render @ runtime-core.esm-bundler.js?5c40:4822 mount @ runtime-core.esm-bundler.js?5c40:3157 app.mount @ runtime-dom.esm-bundler.js?830f:1572 eval @ main.js?56d7:11 ./src/main.js @ app.js:1277 webpack_require @ app.js:849 fn @ app.js:151 1 @ app.js:1350 webpack_require @ app.js:849 checkDeferredModules @ app.js:46 (anonymous) @ app.js:925 (anonymous) @ app.js:928 Show 5 more frames

Here is the screenshot of code. Serve is compiling it correctly and not giving any error. Path is absolute correct.

Here is the code.

<template>
  <header>
    <nav class="container">
      <div class="branding">
        <router-link class="header" :to="{ name: 'Home' }"
          >Fireblogs</router-link
        >
      </div>
      <div class="nav-link">
        <ul>
          <router-link class="link" to="#">Home</router-link>
          <router-link class="link" to="#">Blogs</router-link>
          <router-link class="link" to="#">Create Post</router-link>
          <router-link class="link" to="#">Login/Register</router-link>
        </ul>
      </div>
    </nav>
    <!-- Menu Icon -->
    <menuIcon />
  </header>
</template>

<script>
import menuIcon from "../assets/Icons/twitter-brands.svg";
export default {
  name: "Navigation",
  components: {
    menuIcon,
  },
};
</script>

Here is the package.json code

{
  "name": "vue-with-firebase",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "firebase": "^9.1.3",
    "vue": "^3.0.0",
    "vue-firebase": "^1.0.8",
    "vue-router": "^4.0.0-0",
    "vue2-editor": "^2.10.3",
    "vuefire": "^2.2.5",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "vue-svg-loader": "^0.16.0",
    "vue-template-compiler": "^2.6.14"
  }
}

Answer 1

After long research, I have solved the error. I wasn't using the same versions of vue and vue template compiler. I fixed that by reinstalling them

Reinstalling vue

npm i vue@latest --save
npm i vue-template-compiler@latest --save
npm i vue-server-renderer@latest --save

After these I also reinstalled other dependencies using @latest