Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
sfxcode opened this issue Jan 21, 2021 · 9 comments
Closed

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

sfxcode opened this issue Jan 21, 2021 · 9 comments
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@sfxcode
Copy link

sfxcode commented Jan 21, 2021

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
Copy link

Zaaaoo commented Jan 22, 2021

Same here :
image

@cameronrr
Copy link

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

@dhax
Copy link

dhax commented Feb 3, 2021

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
Copy link
Author

sfxcode commented Feb 3, 2021

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

@RobWalker
Copy link

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

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

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

@dhax
Copy link

dhax commented Feb 4, 2021

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
Copy link

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 :(

@mertsincan mertsincan self-assigned this Feb 8, 2021
@mertsincan mertsincan added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Feb 8, 2021
@mertsincan mertsincan added this to the 3.3.0 milestone Feb 8, 2021
@cagataycivici cagataycivici modified the milestones: 3.3.0, 3.2.3 Feb 10, 2021
@fairking
Copy link

fairking commented Jan 14, 2022

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
Copy link

projct1 commented Jul 14, 2024

How to disable ripple globally?
I dont need this, but got nasty error in Tabs component [Vue warn]: Failed to resolve directive: ripple:
image
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
      }
    }
  }
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

10 participants