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>

<style> .area { position: absolute; left: 100px; top: 100px; width: 1720px; height: 840px; background-color: red; } #card1 { width: 400px; height: 400px; background-color: green; } </style>

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