Component is missing template or render function - VueJS Library - vue.js

Question

I am trying to create an SVG library using Vue3 but all I am getting is error...I created the basic library project following this article. Here is my file structure
and this is my code in BaseIcon.vue
<template>
<component :is="iconComponent" class="inline-block fill-current"
style="height: 1em; width: 1em; vertical-align: -0.125em" />
</template>
<script>
const icons = {}
const requireComponents = require.context('../assets/icons/', false, /.svg$/)
requireComponents.keys().forEach(fileName => {
const iconName = fileName.replace(/^\.\/icon-(.+)\.svg$/, '$1')
const componentConfig = requireComponents(fileName)
icons[iconName] = componentConfig.default || componentConfig
})
export default {
props: {
name: {
type: String,
required: true,
validator(value) {
return Object.prototype.hasOwnProperty.call(icons, value)
}
}
},
computed: {
iconComponent() {
return icons[this.name]
},
}
}
</script>
This is the App.vue file code
<template>
<div id="app" class="p-10 text-xl">
<BaseIcon name="user" class="text-blue-500" /> Home
<BaseIcon name="home" class="text-blue-500" /> Profile
</div>
</template>
<script>
import BaseIcon from './BaseIcon.vue'
export default {
name: 'App',
components: {
BaseIcon,
}
}
</script>
My Index.js looks like this
/* eslint-disable import/prefer-default-export */
export { default as App } from './App.vue'
Dev Dependencies in my Package.json are these:
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#rollup/plugin-alias": "^3.1.2",
"#rollup/plugin-babel": "^5.3.0",
"#rollup/plugin-commonjs": "^14.0.0",
"#rollup/plugin-node-resolve": "^9.0.0",
"#rollup/plugin-replace": "^2.4.2",
"#vue/cli-plugin-babel": "^4.5.13",
"#vue/cli-service": "^4.5.13",
"#vue/compiler-sfc": "^3.1.0-0",
"cross-env": "^7.0.3",
"minimist": "^1.2.5",
"postcss": "^8.2.10",
"rimraf": "^3.0.2",
"rollup": "^2.52.8",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^6.0.0",
"vue-loader": "16.8.3",
"vue-svg-loader": "^0.17.0-beta.2",
"vue": "^3.0.5"
},
and I've added vue.config.json with following settings:
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');
},
};
And here is what I am getting as error:
I'm not sure what I am missing here, or what is wrong.. Any kind of help will be appreciated, because its been days that I am stuck here and just couldn't get any idea of resolving this.