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>

[bluelemonade]

the package.json file

{ "name": "siedlungsgeschichte", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", "@coddicat/vue-pinch-scroll-zoom": "^4.7.1", "@vue/composition-api": "^1.0.0-rc.7", "@vueuse/gesture": "^2.0.0", "@vueuse/motion": "^2.2.3", "babel-plugin-transform-remove-console": "^6.9.4", "core-js": "^3.6.5", "gsap": "npm:@gsap/shockingly@^3.6.0", "lodash": "^4.17.21", "mitt": "^3.0.0", "stats-js": "^1.0.1", "vue": "^3.0.0", "vue-resource": "^1.5.3", "vuex": "^4.0.2" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.15", "@vue/cli-plugin-eslint": "~4.5.15", "@vue/cli-service": "~4.5.15", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0", "sass": "^1.53.0", "sass-loader": "^10.3.1" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }