Cannot read property 'parseComponent' of undefined

[Anaphase]

Hi there. I'm trying to get svg-to-vue-component up and running and I've hit a road block. I installed the npm module, and copy/pasted the Vue CLI config into vue.config.js. When I try to run vue-cli-service serve, I get the following error:

Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined

Vue Component

<template>
  <TestIcon />
</template>

<script>

  import TestIcon from '@/assets/icons/test.svg'

  export default {
    components: {
      TestIcon,
    },
  }

</script>

<style lang="stylus" scoped>

</style>

SVG

<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
  <g><rect fill="none" height="24" width="24"/></g>
  <g><path d="M23,12l-2.44-2.79l0.34-3.69l-3.61-0.82L15.4,1.5L12,2.96L8.6,1.5L6.71,4.69L3.1,5.5L3.44,9.2L1,12l2.44,2.79l-0.34,3.7 l3.61,0.82L8.6,22.5l3.4-1.47l3.4,1.46l1.89-3.19l3.61-0.82l-0.34-3.69L23,12z M10.09,16.72l-3.8-3.81l1.48-1.48l2.32,2.33 l5.85-5.87l1.48,1.48L10.09,16.72z"/></g>
</svg>

vue.config.js

module.exports = {
  chainWebpack(config) {
    // only convert .svg files that are imported by these files as vue component
    const fileRegex = /\.(vue|js|ts|svg)$/

    // use vue-cli's default rule for svg in non .vue .js .ts files
    config.module.rule('svg').issuer((file) => { return !fileRegex.test(file) })

    // use our loader to handle svg imported by other files
    config.module
      .rule('svg-component')
      .test(/\.svg$/)
      .issuer((file) => { return fileRegex.test(file) })
      .use('vue')
      .loader('vue-loader')
      .end()
      .use('svg-to-vue-component')
      .loader('svg-to-vue-component/loader')
  },
}

I'm not sure what I'm doing wrong. I'm using Vue 3, so maybe that's the issue? Any help would be appreciated!