vueuse / gesture

🕹 Vue Composables making your app interactive
https://gesture.vueuse.org
MIT License
353 stars 18 forks source link

Module not found... #32

Open bluelemonade opened 1 month ago

bluelemonade commented 1 month ago

I created a new vue3 project with the package.json listed below in cli3.

then I integrated the MultiGesture.vue, but I always get an error. what could be the reason for this?

is there a demo project in cli

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

Module not found: Error: Can't resolve 'defu' in 'E:\_projekte\PRIGNITZMUSEUM_HAVELBERG\P7_SIEDLUNGSGESCHICHTE\vuemotion-typescript\node_modules\@vueuse\motion\dist'

ERROR in ./node_modules/@vueuse/motion/dist/index.mjs 11:0-24
Module not found: Error: Can't resolve 'defu' in 'E:\_projekte\PRIGNITZMUSEUM_HAVELBERG\P7_SIEDLUNGSGESCHICHTE\vuemotion-typescript\node_modules\@vueuse\motion\dist'
 @ ./src/main.ts 6:0-46 7:61-73

webpack compiled with 1 error
ERROR in src/components/_VueImagePinch.vue:55:35
TS7031: Binding element 'x' implicitly has an 'any' type.
    53 |     const motions = useMotions();
    54 |
  > 55 |     const handler = ({ movement: [x, y], dragging }) => {
       |                                   ^
    56 |       // Check element existence
    57 |       if (!motions.demo) return;
    58 |

package.json

{
  "name": "vuemotion-typescript",
  "version": "0.1.0",
  "private": true,

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

  "dependencies": {
    "@vueuse/core": "^11.0.1",
    "@vueuse/gesture": "^2.1.0",
    "@vueuse/motion": "^2.2.3",
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },

  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "typescript": "~4.5.5"
  }
}

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import { GesturePlugin } from '@vueuse/gesture'
import { MotionPlugin } from '@vueuse/motion'

createApp(App).use(store).use(router).use(GesturePlugin).use(MotionPlugin).mount('#app')