I have a vuejs + typescript project and as soon as I add interactjs package the vue cli compilation show these type errors:
> ERROR in web/node_modules/@interactjs/types/index.d.ts(267,18):
267:18 All declarations of 'BaseEvent' must have identical type parameters.
265 | import type { Interaction, InteractionProxy } from "@interactjs/core/Interaction";
266 | import type { ActionName } from "@interactjs/core/scope";
> 267 | export class BaseEvent<T extends ActionName | null = never> {
| ^
268 | type: string;
269 | target: EventTarget;
270 | currentTarget: Node;
ERROR in web/node_modules/@interactjs/types/index.d.ts(287,22):
287:22 All declarations of 'BaseEvent' must have identical type parameters.
285 | stopImmediatePropagation(): void;
286 | }
> 287 | export interface BaseEvent<T extends ActionName> {
| ^
288 | interaction: InteractionProxy<T>;
289 | }
290 | }
ERROR in /node_modules/@interactjs/types/index.d.ts(2487,34):
2487:34 Type 'T' does not satisfy the constraint '"drag" | "drop" | "resize" | "gesture"'.
Type '"drag" | "drop" | "resize" | "gesture" | null' is not assignable to type '"drag" | "drop" | "resize" | "gesture"'.
Type 'null' is not assignable to type '"drag" | "drop" | "resize" | "gesture"'.
Type 'T' is not assignable to type '"gesture"'.
Type '"drag" | "drop" | "resize" | "gesture" | null' is not assignable to type '"gesture"'.
Type 'null' is not assignable to type '"gesture"'.
2485 | eventTarget: Node;
2486 | };
> 2487 | prevEvent: InteractEvent<T, EventPhase>;
| ^
2488 | pointerIsDown: boolean;
2489 | pointerWasMoved: boolean;
2490 | _interacting: boolean;
ERROR in /node_modules/@interactjs/types/index.d.ts(2588,135):
2588:135 Type 'T' does not satisfy the constraint '"drag" | "drop" | "resize" | "gesture"'.
Type 'T' is not assignable to type '"gesture"'.
2586 | _updateLatestPointer(pointer: PointerType, event: PointerEventType, eventTarget: Node): void;
2587 | destroy(): void;
> 2588 | _createPreparedEvent<P extends EventPhase>(event: PointerEventType, phase: P, preEnd?: boolean, type?: string): InteractEvent<T, P>;
| ^
2589 | _fireEvent<P extends EventPhase>(iEvent: InteractEvent<T, P>): void;
2590 | _doPhase<P extends EventPhase>(signalArg: Omit<DoPhaseArg<T, P>, 'iEvent'> & {
2591 | iEvent?: InteractEvent<T, P>;
ERROR in /web/node_modules/@interactjs/types/index.d.ts(2589,64):
2589:64 Type 'T' does not satisfy the constraint '"drag" | "drop" | "resize" | "gesture"'.
Type 'T' is not assignable to type '"gesture"'.
2587 | destroy(): void;
2588 | _createPreparedEvent<P extends EventPhase>(event: PointerEventType, phase: P, preEnd?: boolean, type?: string): InteractEvent<T, P>;
> 2589 | _fireEvent<P extends EventPhase>(iEvent: InteractEvent<T, P>): void;
| ^
2590 | _doPhase<P extends EventPhase>(signalArg: Omit<DoPhaseArg<T, P>, 'iEvent'> & {
2591 | iEvent?: InteractEvent<T, P>;
2592 | }): boolean;
ERROR in /node_modules/@interactjs/types/index.d.ts(2590,67):
2590:67 Type 'T' does not satisfy the constraint '"drag" | "drop" | "resize" | "gesture"'.
Type 'T' is not assignable to type '"gesture"'.
2588 | _createPreparedEvent<P extends EventPhase>(event: PointerEventType, phase: P, preEnd?: boolean, type?: string): InteractEvent<T, P>;
2589 | _fireEvent<P extends EventPhase>(iEvent: InteractEvent<T, P>): void;
> 2590 | _doPhase<P extends EventPhase>(signalArg: Omit<DoPhaseArg<T, P>, 'iEvent'> & {
| ^
2591 | iEvent?: InteractEvent<T, P>;
2592 | }): boolean;
2593 | _now(): number;
ERROR in /node_modules/@interactjs/types/index.d.ts(2591,36):
2591:36 Type 'T' does not satisfy the constraint '"drag" | "drop" | "resize" | "gesture"'.
Type 'T' is not assignable to type '"gesture"'.
2589 | _fireEvent<P extends EventPhase>(iEvent: InteractEvent<T, P>): void;
2590 | _doPhase<P extends EventPhase>(signalArg: Omit<DoPhaseArg<T, P>, 'iEvent'> & {
> 2591 | iEvent?: InteractEvent<T, P>;
| ^
2592 | }): boolean;
2593 | _now(): number;
2594 | }
This don't block the execution but the build failed. I try with es6 packages @interactjs/interact, @interactjs/actions, ... but it is the same.
I create new vue empty project and add only interactjs to have a code sample in bug declaration but all works perfectly. So I use same version version of interactjs, typescript and all vue packages in my project but I keep seeing the problem.
Here my packages in package.json in case any of you know there is a conflict between packages
"dependencies": {
"@aws-amplify/auth": "^3.4.14",
"@aws-amplify/core": "^3.8.6",
"@fortawesome/fontawesome-svg-core": "^1.2.27",
"@fortawesome/pro-duotone-svg-icons": "^5.12.1",
"@fortawesome/pro-light-svg-icons": "^5.12.1",
"@fortawesome/pro-regular-svg-icons": "^5.12.1",
"@fortawesome/pro-solid-svg-icons": "^5.12.1",
"@fortawesome/vue-fontawesome": "^0.1.9",
"async-mutex": "^0.3.1",
"aws-sdk": "^2.805.0",
"axios": "^0.19.2",
"core-js": "^3.6.5",
"echarts": "^5.0.2",
"hls-parser": "^0.6.1",
"hls.js": "^1.0.2",
"interactjs": "^1.10.11",
"platform": "^1.3.6",
"resize-observer": "^1.0.0",
"rxjs": "^6.5.4",
"wavesurfer.js": "^3.3.1",
"ts-ebml": "^2.0.2",
"v-tooltip": "^2.1.3",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-i18n": "^8.24.4",
"vue-meta": "^2.4.0",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
"vuex-class": "^0.3.2"
},
"devDependencies": {
"@types/dom-mediacapture-record": "^1.0.6",
"@types/gapi.auth2": "0.0.50",
"@types/hls-parser": "^0.5.1",
"@types/mime-types": "^2.1.0",
"@types/node": "^15.12.5",
"@types/platform": "^1.3.3",
"@types/resize-observer-browser": "^0.1.4",
"@types/wavesurfer.js": "^3.3.1",
"@types/webrtc": "0.0.25",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-airbnb": "^5.0.2",
"@vue/eslint-config-typescript": "^7.0.0",
"chunks-webpack-plugin": "^7.0.0",
"css-loader": "^3.5.3",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "^6.2.2",
"file-loader": "^6.0.0",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^4.3.0",
"mime-types": "^2.1.27",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"remove-files-webpack-plugin": "1.4.4",
"sass": "^1.35.1",
"sass-loader": "^8.0.2",
"ts-loader": "^7.0.4",
"tsconfig-paths-webpack-plugin": "^3.2.0",
"typescript": "~4.1.5",
"url-loader": "^4.1.0",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.11",
"worker-loader": "^3.0.5",
"ws": "^6.2.1"
}
It sounds like you need to install the types too.
npm install --save-dev @interactjs/types. Should do the trick.https://github.com/taye/interact.js#typescript-definitions