Compile Problem with Directives( Typescript and 3.2.0-rc.1)

[sfxcode]

Version: 3.2.0-rc.1

Tooltip and Ripple Directives

After Update following code does not compile anymore:

ERROR in src/main.ts:125:26
TS2693: 'Tooltip' only refers to a type, but is being used as a value here.

   125 | app.directive('tooltip', Tooltip);
  > 126 | app.directive('ripple', Ripple);
        |                         ^^^^^^

Works fine with: 3.1.2

Greetings,

Tom

[Zaaaoo]

Same here :

[cameronrr]

Same! The issue is the same when adding directive into an SFC. Thank you.

[dhax]

did you find any workaround for this, as this directive is used in many components?
Issue still present in v3.2.0, also when enabling it only for PrimeVue components via app.use(PrimeVue, { ripple: true }); with console error [Vue warn]: Failed to resolve directive: ripple

Also just not enabling it at all doesn't seem to work, it compiles but in the browser console the app doesn't load:

runtime-core.esm-bundler.js?5c40:2884 Uncaught TypeError: Cannot read property 'created' of undefined
    at invokeDirectiveHook (runtime-core.esm-bundler.js?5c40:2884)
    at mountElement (runtime-core.esm-bundler.js?5c40:3820)
    at processElement (runtime-core.esm-bundler.js?5c40:3789)
    at patch (runtime-core.esm-bundler.js?5c40:3709)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4211)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4176)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4134)
    at processComponent (runtime-core.esm-bundler.js?5c40:4094)
invokeDirectiveHook @ runtime-core.esm-bundler.js?5c40:2884
mountElement @ runtime-core.esm-bundler.js?5c40:3820
processElement @ runtime-core.esm-bundler.js?5c40:3789
patch @ runtime-core.esm-bundler.js?5c40:3709
componentEffect @ runtime-core.esm-bundler.js?5c40:4211
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
effect @ reactivity.esm-bundler.js?a1e9:17
setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4176
mountComponent @ runtime-core.esm-bundler.js?5c40:4134
processComponent @ runtime-core.esm-bundler.js?5c40:4094
patch @ runtime-core.esm-bundler.js?5c40:3712
mountChildren @ runtime-core.esm-bundler.js?5c40:3894
< ... >
patch @ runtime-core.esm-bundler.js?5c40:3712
render @ runtime-core.esm-bundler.js?5c40:4794
mount @ runtime-core.esm-bundler.js?5c40:3019
app.mount @ runtime-dom.esm-bundler.js?830f:1220
eval @ main.ts?bc82:60
./src/main.ts @ app.js:1431
__webpack_require__ @ app.js:854
fn @ app.js:151
1 @ app.js:1504
__webpack_require__ @ app.js:854
checkDeferredModules @ app.js:46
(anonymous) @ app.js:994
(anonymous) @ app.js:997
Show 54 more frames
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <RouterLink key=1 to="/" class="p-ripple"  ... > ```

[sfxcode]

We have the problem with the bought diamond theme, which use ripple as well ....

[RobWalker]

As a workaround the following is 'working' for me:

// @ts-ignore
app.directive('tooltip', Tooltip);

// @ts-ignore
app.directive('ripple', Ripple);

[dhax]

additionally, for whom is using eslint with @typescript-eslint/ban-ts-ignore like in a standard vue-cli project, this seems to be the workaround ;)

// eslint-disable-next-line
// @ts-ignore
app.directive('tooltip', Tooltip);

[thomassittig]

hey there, this is still not working in the 3.2.2 version.

And i think ignoring the lint rules here can only be a temp. workaround :(

[fairking]

I have primevue 2.8.0 and I had the same issue.

So the actual fix is:
Instead of having import Tooltip from 'primevue/tooltip/Tooltip';
you must change to import Tooltip from 'primevue/tooltip';

And the error gone away.

[projct1]

How to disable ripple globally?
I dont need this, but got nasty error in Tabs component [Vue warn]: Failed to resolve directive: ripple:

But if i remove TabList error is gone.

My nuxt.config.ts is here:

import Aura from '@primevue/themes/aura'

export default defineNuxtConfig({
  modules: [
    "@primevue/nuxt-module",
  ],
  primevue: {
    options: {
      ripple: false,
      theme: {
        preset: Aura
      }
    }
  }
})