search

KABBOUCHI / vue-tippy

VueJS Tooltip powered by Tippy.js
https://vue-tippy.netlify.app
MIT License
736 stars 89 forks source link

Vue 3 / vue-tippy@next configuration issue #161

Closed bjoern247 closed 3 years ago

bjoern247 commented 3 years ago

Hello,

I have been trying to use vue-tippy for a Vue 3 typescript project, however I'm facing difficulties setting it up. I copied everything you described on the installation page to my project, however I can not seem to fix this TypeScript Error to get it working.

My app.ts:

import { createApp } from "vue";

Each of these two options produce the same error

import VueTippy from 'vue-tippy';
import { plugin as VueTippy } from 'vue-tippy';
import myApp from '@frontend/components/zf-configurator.vue';
import option from '@frontend/components/zf-option.vue';
import input from '@frontend/components/zf-input.vue';
import lenghtInput from '@frontend/components/zf-length-input.vue';
import cart from '@frontend/components/zf-cart.vue';
import door from '@frontend/components/zf-door.vue';
import doorOptions from '@frontend/components/zf-door-option.vue';
import extras from '@frontend/components/zf-extras.vue';

const app = createApp(myApp);
app.component('zf-option', option);
app.component('zf-input', input);
app.component('zf-length-input', lenghtInput);
app.component('zf-cart', cart);
app.component('zf-door', door);
app.component('zf-door-option', doorOptions);
app.component('zf-extras', extras);

app.use(VueTippy, {
  component: 'tippy',
  defaultProps: {
    placement: 'top'
  }
});

app.mount("#package-configurator-v2");

The error I get:

[tsl] ERROR in Path removed*confident*src/vue/app.ts(21,9)
      TS2345: Argument of type 'import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").Plugin' is not assignable to parameter of type 'import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").Plugin'.
  Type 'PluginInstallFunction & { install?: PluginInstallFunction | undefined; }' is not assignable to type 'Plugin_2'.
    Type 'PluginInstallFunction & { install?: PluginInstallFunction | undefined; }' is not assignable to type 'PluginInstallFunction & { install?: PluginInstallFunction | undefined; }'. Two different types with this name exist, but they are unrelated.
      Type 'PluginInstallFunction & { install?: PluginInstallFunction | undefined; }' is not assignable to type 'PluginInstallFunction'.
        Types of parameters 'app' and 'app' are incompatible.
          Type 'import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").App<any>' is not assignable to type 'import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").App<any>'.
            The types of 'config.errorHandler' are incompatible between these types.
              Type '((err: unknown, instance: import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("Path removed*confident*nod...' is not assignable to type '((err: unknown, instance: import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core")....'.
                Type '(err: unknown, instance: import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("Path removed*confident*node...' is not assignable to type '(err: unknown, instance: import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").C...'.
                  Types of parameters 'instance' and 'instance' are incompatible.
                    Type 'import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, ...' is not assignable to type 'import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("Path removed*confident*node_modules/@vue/runtime-cor...'.
                      Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>' is not assignable to type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null'.
                        Type 'import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, ...' is not assignable to type 'import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("Path removed*confident*node_modules/@vue/runtime-cor...'.
                          Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: {}; $attrs: Record<string, unknown>; $refs: Record<string, unknown>; $slots: Readonly<InternalSlots>; ... 7 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; }'.
                            The types of '$.type' are incompatible between these types.
                              Type 'import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").ConcreteComponent<{}, any, any, Record<string, import("Path removed*confident*node_modules/@vue/reactivity/dist/reactivity").ComputedGetter<any> | import("/Users/leonex/Do...' is not assignable to type 'import("Path removed*confident*node_modules/@vue/runtime-core/dist/runtime-core").ConcreteComponent<{}, any, any, Record<string, import("Path removed*confident*node_modules/@vue/reactivity/dist/reactivity"...'.
                                Type 'ComponentOptions<{}, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, any, any, any>' is not assignable to type 'ConcreteComponent<{}, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>'.
                                  Type 'ComponentOptions<{}, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, any, any, any>' is not assignable to type 'FunctionalComponent<{}, any>'.
                                    Type 'ComponentOptionsBase<{}, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, ... 4 more ..., {}> & ThisType<...>' provides no match for the signature '(props: {}, ctx: SetupContext<any>): any'.

webpack 5.3.2 compiled with 1 error

I don't want to waste anybody's time but any help would be very much appreciated.

KABBOUCHI commented 3 years ago

Hi, I'll investigate the issue ASAP.

Meanwhile, install it manually:

import { createApp } from "vue";
import { Tippy, directive, setDefaultProps } from 'vue-tippy';

setDefaultProps({
    placement: 'top'
})

const app = createApp({ ... });

app.directive('tippy', directive) // if you need  v-tippy
app.component('tippy', Tippy) // if you need <tippy/> component

app.mount(...");

if you are using only useTippy no need to install anything

bjoern247 commented 3 years ago

Thank you for your answer, I tried your solution, however I get another error:

In short:

Type 'ObjectDirective<any, any>' is not assignable to type 'Directive<any, any>'.
Types of property 'created' are incompatible.
Types of parameters 'binding' and 'binding' are incompatible.
DirectiveBinding<any>' is not assignable to type DirectiveBinding<any>
Types of parameters 'binding' and 'binding' are incompatible.
Types of property 'instance' are incompatible.
Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: {}; $attrs: Record<string, unknown>; $refs: Record<string, unknown>; $slots: Readonly<InternalSlots>; ... 7 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; }'.
                          The types of '$.type' are incompatible between these types.
 Type 'ComponentOptions<{}, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, any, any, any>' is not assignable to type 'ConcreteComponent<{}, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>'.
Type 'ComponentOptions<{}, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, any, any, any>' is not assignable to type 'FunctionalComponent<{}, any>'.
                                  Type 'ComponentOptionsBase<{}, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, ... 4 more ..., {}> & ThisType<...>' provides no match for the signature '(props: {}, ctx: SetupContext<any>): any'.

webpack 5.3.2 compiled with 1 error

The errors all locate to: /@vue/runtime-core/dist/runtime-core") Without tippy everything compiles fine.

@vue/compiler-core@3.0.2":
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.2.tgz#7790b7a1fcbba5ace4d81a70ce59096fa5c95734"
  integrity sha512-GOlEMTlC/OdzBkKaKOniYErbkjoKxkBOmulxGmMR10I2JJX6TvXd/peaO/kla2xhpliV/M6Z4TLJp0yjAvRIAw==
  dependencies:
    "@babel/parser" "^7.12.0"
    "@babel/types" "^7.12.0"
    "@vue/shared" "3.0.2"
    estree-walker "^2.0.1"
    source-map "^0.6.1"

"@vue/compiler-dom@3.0.2":
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.2.tgz#1d40de04bcdf9aabb79fb6a802dd70a2f3c2992a"
  integrity sha512-jvaL4QF2yXBJVD+JLbM2YA3e5fNfflJnfQ+GtfYk46ENGsEetqbkZqcX7fO+RHdG8tZBo7LCNBvgD0QLr+V4sg==
  dependencies:
    "@vue/compiler-core" "3.0.2"
    "@vue/shared" "3.0.2"

"@vue/compiler-sfc@^3.0.2":
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.2.tgz#22c70fed72c347a4d5fa2db2e80594b3193dce57"
  integrity sha512-viYjT5ehDSLM3v0jQ9hbTs4I5e/7lSlYsDOp7TQ1qcwHRvzoTQMTkFpY/Iae+LFKM124Ld17tBfXgfrZl9dt+g==
  dependencies:
    "@babel/parser" "^7.12.0"
    "@babel/types" "^7.12.0"
    "@vue/compiler-core" "3.0.2"
    "@vue/compiler-dom" "3.0.2"
    "@vue/compiler-ssr" "3.0.2"
    "@vue/shared" "3.0.2"
    consolidate "^0.16.0"
    estree-walker "^2.0.1"
    hash-sum "^2.0.0"
    lru-cache "^5.1.1"
    magic-string "^0.25.7"
    merge-source-map "^1.1.0"
    postcss "^7.0.32"
    postcss-modules "^3.2.2"
    postcss-selector-parser "^6.0.4"
    source-map "^0.6.1"

"@vue/compiler-ssr@3.0.2":
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.2.tgz#73af4d274a79bfcc72a996a9b45f1072e7deaa26"
  integrity sha512-gOgK1lf+0bFl+kQj6TU0TU1jIDFlsPRlSBZaUUA16DGeeiJrFanhsMuIs/l9U0IBFr/VJcHgzYpTXqHp95luHw==
  dependencies:
    "@vue/compiler-dom" "3.0.2"
    "@vue/shared" "3.0.2"

"@vue/reactivity@3.0.2":
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.2.tgz#42ed5af6025b494a5e69b05169fcddf04eebfe77"
  integrity sha512-GdRloNcBar4yqWGXOcba1t//j/WizwfthfPUYkjcIPHjYnA/vTEQYp0C9+ZjPdinv1WRK1BSMeN/xj31kQES4A==
  dependencies:
    "@vue/shared" "3.0.2"

"@vue/runtime-core@3.0.2":
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.2.tgz#d7ed462af1cb0bf9836668e4e6fab3f2f4b1bc00"
  integrity sha512-3m/jOs2xSipEFah9FgpEzvC9nERFonVGLN06+pf8iYPIy54Nlv7D2cyrk3Lhbjz4w3PbIrkxJnoTJYvJM7HDfA==
  dependencies:
    "@vue/reactivity" "3.0.2"
    "@vue/shared" "3.0.2"

"@vue/runtime-dom@3.0.2":
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.2.tgz#9d166d03225558025d3d80f5039b646e0051b71c"
  integrity sha512-vqC1KK1yWthTw1FKzajT0gYQaEqAq7bpeeXQC473nllGC5YHbJhNAJLSmrDun1tjXqGF0UNCWYljYm+++BJv6w==
  dependencies:
    "@vue/runtime-core" "3.0.2"
    "@vue/shared" "3.0.2"
    csstype "^2.6.8"

"@vue/shared@3.0.2":
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.2.tgz#419bd85a2ebdbd4f42963e98c5a1b103452176d9"
  integrity sha512-Zx869zlNoujFOclKIoYmkh8ES2RcS/+Jn546yOiPyZ+3+Ejivnr+fb8l+DdXUEFjo+iVDNR3KyLzg03aBFfZ4Q==
KABBOUCHI commented 3 years ago

plz, can you provide a minimal setup? I tried with vite + vue-ts template and it's working fine.

vue3-tippy-test.zip

bjoern247 commented 3 years ago

Thank you for your quick help, I see that it's working on a clean install, also checked it myself. Somewhere the project is setup incorrectly, however as the project is very big and Vue is only a small part and addition to it, I am struggling to provide a minimal setup for now, which is why I suggest we close this issue. However thank you really much for trying to help me out here!