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.

Sign up for GitHub

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

Jump to bottom

Cannot read properties of undefined (reading 'config') if use v-ripple and <script setup> #13488

Closed
craftsman-expert opened this issue May 21, 2022 · 3 comments
Closed

Cannot read properties of undefined (reading 'config') if use v-ripple and <script setup> #13488

craftsman-expert opened this issue May 21, 2022 · 3 comments
Labels
area/composables area/directives area/typescript bug/0-needs-info Need more info to reproduce flavour/quasar-cli-vite kind/bug 🐞 mode/spa Qv2 🔝 Quasar v2 issues

Comments

@craftsman-expert
Copy link

What happened?

Cannot read properties of undefined (reading 'config')

If

<template>
  <q-list separator>
    <q-item  clickable v-ripple>
      <q-item-section>Single line item</q-item-section>
    </q-item>
  </q-list>
</template>

<script setup>
...
</script>

What did you expect to happen?

I expected ripple to work properly

Reproduction URL

https://google.com

How to reproduce?

<template>
  <q-list separator>
    <q-item  clickable v-ripple>
      <q-item-section>Single line item</q-item-section>
    </q-item>
  </q-list>
</template>


<script setup>

function onAddClick() {
  console.log('Click')
}
</script>

image

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Directives (quasar), Composables (quasar), TypeScript Support, SPA Mode

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

vue-router.esm-bundler.js:3308 TypeError: Cannot read properties of undefined (reading 'config')
    at updateModifiers (Ripple.js?v=543049e0:65:45)
    at beforeMount (Ripple.js?v=543049e0:112:9)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
    at invokeDirectiveHook (runtime-core.esm-bundler.js:2791:13)
    at mountElement (runtime-core.esm-bundler.js:5180:13)
    at processElement (runtime-core.esm-bundler.js:5110:13)
    at patch (runtime-core.esm-bundler.js:5030:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5582:21)
    at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
triggerError @ vue-router.esm-bundler.js:3308
(анонимная) @ vue-router.esm-bundler.js:3344
Объект Promise.catch (асинхронный)
handleScroll @ vue-router.esm-bundler.js:3344
finalizeNavigation @ vue-router.esm-bundler.js:3198
(анонимная) @ vue-router.esm-bundler.js:3070
Объект Promise.then (асинхронный)
pushWithRedirect @ vue-router.esm-bundler.js:3041
push @ vue-router.esm-bundler.js:2969
install @ vue-router.esm-bundler.js:3386
use @ runtime-core.esm-bundler.js:4327
start @ client-entry.js:118
Объект await in start (асинхронный)
(анонимная) @ client-entry.js:149
Объект Promise.then (асинхронный)
(анонимная) @ client-entry.js:144
Объект Promise.then (асинхронный)
(анонимная) @ client-entry.js:137
Ripple.js?v=543049e0:65 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'config')
    at updateModifiers (Ripple.js?v=543049e0:65:45)
    at beforeMount (Ripple.js?v=543049e0:112:9)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
    at invokeDirectiveHook (runtime-core.esm-bundler.js:2791:13)
    at mountElement (runtime-core.esm-bundler.js:5180:13)
    at processElement (runtime-core.esm-bundler.js:5110:13)
    at patch (runtime-core.esm-bundler.js:5030:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5582:21)
    at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
updateModifiers @ Ripple.js?v=543049e0:65
beforeMount @ Ripple.js?v=543049e0:112
callWithErrorHandling @ runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164
invokeDirectiveHook @ runtime-core.esm-bundler.js:2791
mountElement @ runtime-core.esm-bundler.js:5180
processElement @ runtime-core.esm-bundler.js:5110
patch @ runtime-core.esm-bundler.js:5030
componentUpdateFn @ runtime-core.esm-bundler.js:5582
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5689
setupRenderEffect @ runtime-core.esm-bundler.js:5703
mountComponent @ runtime-core.esm-bundler.js:5485
processComponent @ runtime-core.esm-bundler.js:5443
patch @ runtime-core.esm-bundler.js:5033
mountChildren @ runtime-core.esm-bundler.js:5229
mountElement @ runtime-core.esm-bundler.js:5138
processElement @ runtime-core.esm-bundler.js:5110
patch @ runtime-core.esm-bundler.js:5030
componentUpdateFn @ runtime-core.esm-bundler.js:5582
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5689
setupRenderEffect @ runtime-core.esm-bundler.js:5703
mountComponent @ runtime-core.esm-bundler.js:5485
processComponent @ runtime-core.esm-bundler.js:5443
patch @ runtime-core.esm-bundler.js:5033
componentUpdateFn @ runtime-core.esm-bundler.js:5582
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5689
setupRenderEffect @ runtime-core.esm-bundler.js:5703
mountComponent @ runtime-core.esm-bundler.js:5485
processComponent @ runtime-core.esm-bundler.js:5443
patch @ runtime-core.esm-bundler.js:5033
componentUpdateFn @ runtime-core.esm-bundler.js:5582
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5689
setupRenderEffect @ runtime-core.esm-bundler.js:5703
mountComponent @ runtime-core.esm-bundler.js:5485
processComponent @ runtime-core.esm-bundler.js:5443
patch @ runtime-core.esm-bundler.js:5033
mountChildren @ runtime-core.esm-bundler.js:5229
mountElement @ runtime-core.esm-bundler.js:5138
processElement @ runtime-core.esm-bundler.js:5110
patch @ runtime-core.esm-bundler.js:5030
componentUpdateFn @ runtime-core.esm-bundler.js:5582
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5689
setupRenderEffect @ runtime-core.esm-bundler.js:5703
mountComponent @ runtime-core.esm-bundler.js:5485
processComponent @ runtime-core.esm-bundler.js:5443
patch @ runtime-core.esm-bundler.js:5033
mountChildren @ runtime-core.esm-bundler.js:5229
mountElement @ runtime-core.esm-bundler.js:5138
processElement @ runtime-core.esm-bundler.js:5110
patch @ runtime-core.esm-bundler.js:5030
componentUpdateFn @ runtime-core.esm-bundler.js:5582
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5689
setupRenderEffect @ runtime-core.esm-bundler.js:5703
mountComponent @ runtime-core.esm-bundler.js:5485
processComponent @ runtime-core.esm-bundler.js:5443
patch @ runtime-core.esm-bundler.js:5033
mountChildren @ runtime-core.esm-bundler.js:5229
mountElement @ runtime-core.esm-bundler.js:5138
processElement @ runtime-core.esm-bundler.js:5110
patch @ runtime-core.esm-bundler.js:5030
componentUpdateFn @ runtime-core.esm-bundler.js:5582
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5689
setupRenderEffect @ runtime-core.esm-bundler.js:5703
mountComponent @ runtime-core.esm-bundler.js:5485
processComponent @ runtime-core.esm-bundler.js:5443
patch @ runtime-core.esm-bundler.js:5033
componentUpdateFn @ runtime-core.esm-bundler.js:5582
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5689
setupRenderEffect @ runtime-core.esm-bundler.js:5703
mountComponent @ runtime-core.esm-bundler.js:5485
processComponent @ runtime-core.esm-bundler.js:5443
patch @ runtime-core.esm-bundler.js:5033
componentUpdateFn @ runtime-core.esm-bundler.js:5655
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5689
callWithErrorHandling @ runtime-core.esm-bundler.js:155
flushJobs @ runtime-core.esm-bundler.js:396
Объект Promise.then (асинхронный)
nextTick @ runtime-core.esm-bundler.js:246
(анонимная) @ QResizeObserver.js?v=543049e0:65
callWithErrorHandling @ runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2687
flushPostFlushCbs @ runtime-core.esm-bundler.js:358
flushJobs @ runtime-core.esm-bundler.js:403
Объект Promise.then (асинхронный)
queueFlush @ runtime-core.esm-bundler.js:285
queueCb @ runtime-core.esm-bundler.js:307
queuePostFlushCb @ runtime-core.esm-bundler.js:313
queueEffectWithSuspense @ runtime-core.esm-bundler.js:1582
scheduler @ runtime-core.esm-bundler.js:1804
triggerEffect @ reactivity.esm-bundler.js:394
triggerEffects @ reactivity.esm-bundler.js:384
triggerRefValue @ reactivity.esm-bundler.js:1000
(анонимная) @ reactivity.esm-bundler.js:1131
triggerEffect @ reactivity.esm-bundler.js:394
triggerEffects @ reactivity.esm-bundler.js:379
triggerRefValue @ reactivity.esm-bundler.js:1000
(анонимная) @ reactivity.esm-bundler.js:1131
triggerEffect @ reactivity.esm-bundler.js:394
triggerEffects @ reactivity.esm-bundler.js:379
triggerRefValue @ reactivity.esm-bundler.js:1000
set value @ reactivity.esm-bundler.js:1044
finalizeNavigation @ vue-router.esm-bundler.js:3197
(анонимная) @ vue-router.esm-bundler.js:3070
Объект Promise.then (асинхронный)
pushWithRedirect @ vue-router.esm-bundler.js:3041
push @ vue-router.esm-bundler.js:2969
install @ vue-router.esm-bundler.js:3386
use @ runtime-core.esm-bundler.js:4327
start @ client-entry.js:118
Объект await in start (асинхронный)
(анонимная) @ client-entry.js:149
Объект Promise.then (асинхронный)
(анонимная) @ client-entry.js:144
Объект Promise.then (асинхронный)
(анонимная) @ client-entry.js:137
Показать ещё 55 фреймов
Ripple.js?v=543049e0:65 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'config')
    at updateModifiers (Ripple.js?v=543049e0:65:45)
    at beforeMount (Ripple.js?v=543049e0:112:9)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
    at invokeDirectiveHook (runtime-core.esm-bundler.js:2791:13)
    at mountElement (runtime-core.esm-bundler.js:5180:13)
    at processElement (runtime-core.esm-bundler.js:5110:13)
    at patch (runtime-core.esm-bundler.js:5030:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5582:21)
    at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)

Additional context

No response
@github-actions
Copy link

Hi @igorpopryadukhin! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

@MilosPaunovic
Copy link
Member

Sounds related to #13154

@yusufkandemir
Copy link
Member

Closing in favor of #13154.

@yusufkandemir yusufkandemir closed this as not planned Won't fix, can't repro, duplicate, stale May 22, 2022
@jblyberg jblyberg mentioned this issue Jun 18, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area/composables area/directives area/typescript bug/0-needs-info Need more info to reproduce flavour/quasar-cli-vite kind/bug 🐞 mode/spa Qv2 🔝 Quasar v2 issues
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@yusufkandemir @craftsman-expert @MilosPaunovic