Uncaught (in promise) TypeError: e is not a function

[SantiagoAndre]

[Vue warn]: Unhandled error during execution of render function 
  at <SimpleSvg src="@/assets/img/home/first.svg" > 
  at <CarouselSlide key=1 > 
  at <Carousel items-to-show=1 wrapAround=true > 
  at <Home> 
  at <LandingPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> 
  at <App> runtime-core.esm-bundler.js:38
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <SimpleSvg src="@/assets/img/home/ImagenPrincipalInicio.svg" > 
  at <CarouselSlide key=1 > 
  at <Carousel items-to-show=1 wrapAround=true > 
  at <Home> 
  at <LandingPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> 
  at <App> runtime-core.esm-bundler.js:38
Uncaught (in promise) TypeError: e is not a function
    render plugin.js:1
    renderComponentRoot runtime-core.esm-bundler.js:1167
    componentEffect runtime-core.esm-bundler.js:5220
    reactiveEffect reactivity.esm-bundler.js:42
    effect reactivity.esm-bundler.js:17
    setupRenderEffect runtime-core.esm-bundler.js:5173
    mountComponent runtime-core.esm-bundler.js:5132
    processComponent runtime-core.esm-bundler.js:5090
    patch runtime-core.esm-bundler.js:4684

I am ussing vuejs3, my package.json looks:

{
  "name": "mi app",
  "version": "0.1.0",
  "private": true,
  "description": null,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@tailwindcss/postcss7-compat": "^2.1.2",
    "@tailwindcss/typography": "^0.4.0",
    "core-js": "^3.6.5",
    "postcss": "^7.0.35",
    "postcss-loader": "^5.2.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2",
    "vue": "^3.1.3",
    "vue-router": "^4.0.6",
    "vue-simple-svg": "^2.0.2",
    "vue3-carousel": "^0.1.23"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.1.3",
    "autoprefixer": "^9.8.6",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

the main.js is:

import { createApp,h } from 'vue'
import App from './App.vue'
import {SimpleSVG} from 'vue-simple-svg'
import '@/assets/css/tailwind.css'
import '@/assets/css/fonts.css'
import router from '@/router'

const app = createApp({
    render: ()=>h(App)
})

app.component('simple-svg',SimpleSVG)
app.use(router)
app.mount('#app')

the vue.config.js is:

const path = require('path')

function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
    
    config.module
    .rule('compile')
      .test(/\.js$/)
      .use('babel')
        .loader('babel-loader')
        .options({
          presets: [
            ['@babel/preset-env', { modules: false }]
          ]
        });
        
      }
}

The component where i use this p[ackage:

<template>
        <div class="xl:w-7/12 xl:h-96 lg:w-7/12 lg:h-96">
          <simple-svg    src="@/assets/img/home/first.svg"  />
        </div> 
</template>
<script>
export default {
  name: "home"
  data(){
  }
}
</script>

[princeahugah]

Hey, i forked and updated to vue3 here. You can have a look