Component is missing template or render function.

[moonshark]

I am getting issues trying to get this to work.

This is the code inside of my component:

<template>
  <div>
    <SampleSvg />
  </div>
</template>

<script>
import SampleSvg from "@/assets/sample.svg"

export default {
  name: "HelloWorld",
  components: {
    SampleSvg
  },
};
</script>

This is my vue.config.js file:

module.exports = {

  chainWebpack: (config) => {
    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');
  },

  css: {
    loaderOptions: {
      sass: {
        prependData:
        `@import "@/assets/scss/globals/_variables.scss";
          @import "@/assets/scss/globals/_variables-font-sizes.scss";
          @import "@/assets/scss/globals/_colours.scss";
          @import "@/assets/scss/globals/_mixins.scss";
        `
      },
    },
  },
};

This is my package.json file

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "postcss": "^8.3.6",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "style-resources-loader": "^1.4.1",
    "vue-svg-loader": "^0.17.0-beta.2",
    "vue-template-compiler": "^2.6.14"
  }
}

The error I get is:

[Vue warn]: Component is missing template or render function. 
  at <SampleSvg> 
  at <HelloWorld onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>

If I open up the sample.svg file, I have this code:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
   <circle cx="50" cy="50" r="40" stroke="deeppink" stroke-width="2" fill="#ffe6ee" />
</svg>

I am pretty new to Vue, so apologies if this is down to how I have installed it.

[Miguel-Bento-Github]

@moonshark This is a duplicate of this issue