Vue3 SVG组件库报错：Component is missing template or render function

我正在尝试用Vue3搭建一个SVG组件库，跟着教程搭建了基础项目，但一直收到组件渲染错误。

项目文件结构 #

核心代码片段 #

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>

App.vue #

<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>

index.js #

/* eslint-disable import/prefer-default-export */
export { default as App } from './App.vue'

package.json 开发依赖 #

"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"
},

vue.config.js（注：原文件名为vue.config.json，应为js格式） #

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');
  },
};

错误信息 #

已经卡了好几天，实在找不到问题出在哪，求各位帮忙排查。

内容的提问来源于stack exchange，提问作者Naila Akbar