Closed NGPixel closed 2 years ago
Adding a ? in front of $q in quasar/src/directives/Ripple.js
fixes it for me:
diff --git a/node_modules/quasar/src/directives/Ripple.js b/node_modules/quasar/src/directives/Ripple.js
index ebd27ab..b6abcbf 100644
--- a/node_modules/quasar/src/directives/Ripple.js
+++ b/node_modules/quasar/src/directives/Ripple.js
@@ -62,7 +62,7 @@ function showRipple (evt, el, ctx, forceCenter) {
}
function updateModifiers (ctx, { modifiers, value, arg, instance }) {
- const cfg = Object.assign({}, instance.$q.config.ripple, modifiers, value)
+ const cfg = Object.assign({}, instance.$q?.config.ripple, modifiers, value)
ctx.modifiers = {
early: cfg.early === true,
stop: cfg.stop === true,
Pushed a workaround in Quasar for this issue since the fix in Vue takes longer than expected. Fix will be available in Quasar v2.7.3
What happened?
Using vue 3.2.32 or later and the vue composition API (
<script setup>
), addingv-ripple
to an element such asq-item
results in a crash with errorTypeError: Cannot read properties of undefined (reading 'config')
The workaround, as found by @Trinovantes (https://github.com/quasarframework/quasar/issues/13154#issuecomment-1113273509), is to expose
$q
viadefineExpose()
in any component wherev-ripple
is used:The components that accept
v-ripple
should be modified to automatically expose $q so that we don't have to use this workaround.⚠️🛑 This issue was originally discussed in #13154 but was closed since the specific issue from the original post was fixed, but not v-ripple, hence this new issue. 🛑 ⚠️
What did you expect to happen?
v-ripple
should work without the workaround detailed above.Reproduction URL
https://github.com/NGPixel/broken-quasar-vripple-proof
How to reproduce?
yarn
yarn dev
Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
Directives (quasar)
Platforms/Browsers
Firefox, Chrome, Safari, Microsoft Edge
Quasar info output
Relevant log output
No response
Additional context
No response