Having issues with vue-svg-loader - missing template or render function - vue.js

Question

I am getting issues trying to get vue-svg-loader to work. I posted this in the issues part of the plugin, but I am not sure if it is, or just that I have implemented it wrong.
I am pretty new to Vue, so apologies if I am making a really stupid mistake when implementing it.
When I run vue --version it says I am on #vue/cli 4.5.9
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.

Answer 1

My setup is as follows - but since I want to reference both internal and external SVGs (meaning that I want to be able to import an SVG as a Vue Component OR to be able to put it in the SRC of an IMG tag) I use the ?int modifier to signal when I want to receive a component. Without this modifier the import will be the image itself.
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.oneOf('inline')
.resourceQuery(/int/) // internal SVGs must be in the form - import svgComponent from "#/images/example.svg?int" !!!!!
.use('babel-loader')
.loader('babel-loader')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader')
.options({
svgo:
{
plugins: [
{ inlineStyles: { onlyMatchedOnce: false } },
{ removeXMLNS: true },
{ removeViewBox: false },
{ removeDimensions: true },
]
}
})
.end()
.end()
.oneOf('external')
.use('url-loader')
.loader('url-loader')
.options({
limit: 4096,
fallback:
{
loader: 'file-loader',
options:
{
name: 'img/[name].[hash:8].[ext]',
}
}
});