vue3 cli loader errors

[bluelemonade]

I have a vue3 cli project and have tried to get the vue pinch scroll zoom to work. Something always throws an error.

I have attached the essential parts...

 error  in ./src/components/VueImagePinch2.vue?vue&type=script&setup=true&lang=ts

Module parse failed: Unexpected token (4:11)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { ref, reactive } from 'vue';
|     import PinchScrollZoom, {
>       type PinchScrollZoomEmitData,
|       type PinchScrollZoomExposed
|     } from '@coddicat/vue-pinch-scroll-zoom';

 @ ./src/components/VueImagePinch2.vue?vue&type=script&setup=true&lang=ts 1:0-226 1:0-226 1:227-442 1:227-442
 @ ./src/components/VueImagePinch2.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

<template>
    
    <div class="area">
        
        <PinchScrollZoom
            ref="zoomer"
            within
            centered
            key-actions
            :width="300"
            :height="400"
            :min-scale="0.3"
            :max-scale="6"
            @scaling="e => onEvent('scaling', e)"
            @startDrag="e => onEvent('startDrag', e)"
            @stopDrag="e => onEvent('stopDrag', e)"
            @dragging="e => onEvent('dragging', e)"
            style="border: 1px solid black"
            :content-width="500"
            :content-height="500"
            >
            <img src="https://picsum.photos/500/500" width="500" height="500" />
        </PinchScrollZoom>

    </div>
</template>



<script setup lang="ts">
    import { ref, reactive } from 'vue';
    import PinchScrollZoom, {
      type PinchScrollZoomEmitData,
      type PinchScrollZoomExposed
    } from '@coddicat/vue-pinch-scroll-zoom';
    
    const zoomer = ref<PinchScrollZoomExposed>();
    
    function onEvent(name: string, e: PinchScrollZoomEmitData): void {
      state.eventName = name;
      state.eventData = e;
      state.scale = e.scale;
      state.originX = e.originX;
      state.originY = e.originY;
      state.translateX = e.translateX;
      state.translateY = e.translateY;
    }
    
    function reset(): void {
      zoomer.value?.setData({
        scale: 1,
        originX: 150,
        originY: 200,
        translateX: -100,
        translateY: -50
      });
    }

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