vueuse motion throws a loader error

[bluelemonade]

I'm trying to integrate @vueuse/gesture into a vue3 project, as soon as I integrate useSpring and UseMorionProperties it throws an error: Module parse failed: Unexpected token (569:25) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

<template>

    <div class="area">
        <div ref="demo" id="card1" 
            v-drag="dragHandler" 
            v-pinch="pinchHandler" 
            v-hover="hoverHandler">
        </div>
    </div>

</template>

<script lang="ts">
import { ref } from 'vue'; // onMounted,
import { useSpring, useMotionProperties } from '@vueuse/motion' 

export default {

    setup(){

        // const demoElement = ref()
        const demo = ref()

        const { motionProperties } = useMotionProperties(demo, {
            cursor: 'grab',
            x: 0,
            y: 0,
        })

        const { set } = useSpring(motionProperties);

        const pinchHandler = ({ offset: [d, a], pinching }) => {
            console.log("pinch", pinching, d, a);
            set({ zoom: d, rotateZ: a })
        }

        const hoverHandler = ({ hovering }) => {
            if (hovering) {
                set( { backgroundColor: '#7344be', scale: 1.5 } )
            }   else {
                set( {  backgroundColor: '#b164e7', scale: 1 } )
            }
        }

        const dragHandler = (dragState) => {
            console.log("drag", dragState);
        }

        return {
            demo,
            dragHandler,
            pinchHandler,
            hoverHandler
        }
    }

}

</script>

in ./node_modules/@vueuse/motion/dist/index.mjs

Module parse failed: Unexpected token (569:25) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | async function waitForComplete() { | await Promise.all(animations);

  variant.transition?.onComplete?.();

| } | return Promise.all([waitForComplete()]);

@ ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--1-1!./src/components/VueImagePinch.vue?vue&type=script&lang=ts 3:0-63 14:37-56 21:24-33 @ ./src/components/VueImagePinch.vue?vue&type=script&lang=ts @ ./src/components/VueImagePinch.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--1-1!./src/App.vue?vue&type=script&lang=js @ ./src/App.vue?vue&type=script&lang=js @ ./src/App.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.1.32:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js