v-ripple bug h is undefined



  • Hi,

    New here, love quasar.

    Not sure if this is the best place to post this… BUT

    found a bug when adding v-ripple to q-input or any component

    vue.runtime.esm.js?a427:519 TypeError: Cannot read property ‘h’ of undefined
    at unbind (quasar.esm.js?f2cf:1240)
    at callHook$1 (vue.runtime.esm.js?a427:5483)
    at _update (vue.runtime.esm.js?a427:5447)
    at updateDirectives (vue.runtime.esm.js?a427:5389)
    at Array.unbindDirectives (vue.runtime.esm.js?a427:5383)
    at invokeDestroyHook (vue.runtime.esm.js?a427:5025)
    at invokeDestroyHook (vue.runtime.esm.js?a427:5029)
    at invokeDestroyHook (vue.runtime.esm.js?a427:5029)
    at invokeDestroyHook (vue.runtime.esm.js?a427:5029)
    at invokeDestroyHook (vue.runtime.esm.js?a427:5029)
    handleError @ vue.runtime.esm.js?a427:519
    callHook$1 @ vue.runtime.esm.js?a427:5485
    _update @ vue.runtime.esm.js?a427:5447
    updateDirectives @ vue.runtime.esm.js?a427:5389
    unbindDirectives @ vue.runtime.esm.js?a427:5383
    invokeDestroyHook @ vue.runtime.esm.js?a427:5025
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    patch @ vue.runtime.esm.js?a427:5293
    Vue.$destroy @ vue.runtime.esm.js?a427:2372
    destroy @ vue.runtime.esm.js?a427:3399
    invokeDestroyHook @ vue.runtime.esm.js?a427:5024
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    patch @ vue.runtime.esm.js?a427:5293
    Vue.$destroy @ vue.runtime.esm.js?a427:2372
    destroy @ vue.runtime.esm.js?a427:3399
    invokeDestroyHook @ vue.runtime.esm.js?a427:5024
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    patch @ vue.runtime.esm.js?a427:5293
    Vue.$destroy @ vue.runtime.esm.js?a427:2372
    destroy @ vue.runtime.esm.js?a427:3399
    invokeDestroyHook @ vue.runtime.esm.js?a427:5024
    patch @ vue.runtime.esm.js?a427:5293
    Vue.$destroy @ vue.runtime.esm.js?a427:2372
    destroy @ vue.runtime.esm.js?a427:3399
    invokeDestroyHook @ vue.runtime.esm.js?a427:5024
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    patch @ vue.runtime.esm.js?a427:5293
    Vue.$destroy @ vue.runtime.esm.js?a427:2372
    destroy @ vue.runtime.esm.js?a427:3399
    invokeDestroyHook @ vue.runtime.esm.js?a427:5024
    removeVnodes @ vue.runtime.esm.js?a427:5040
    patch @ vue.runtime.esm.js?a427:5365
    Vue._update @ vue.runtime.esm.js?a427:2319
    updateComponent @ vue.runtime.esm.js?a427:2435
    get @ vue.runtime.esm.js?a427:2774
    run @ vue.runtime.esm.js?a427:2844
    flushSchedulerQueue @ vue.runtime.esm.js?a427:2611
    (anonymous) @ vue.runtime.esm.js?a427:651
    nextTickHandler @ vue.runtime.esm.js?a427:598
    Promise resolved (async)
    timerFunc @ vue.runtime.esm.js?a427:613
    queueNextTick @ vue.runtime.esm.js?a427:661
    queueWatcher @ vue.runtime.esm.js?a427:2698
    update @ vue.runtime.esm.js?a427:2834
    notify @ vue.runtime.esm.js?a427:728
    reactiveSetter @ vue.runtime.esm.js?a427:958
    (anonymous) @ vue-router.esm.js?880d:2390
    (anonymous) @ vue-router.esm.js?880d:2389
    updateRoute @ vue-router.esm.js?880d:1924
    (anonymous) @ vue-router.esm.js?880d:1802
    (anonymous) @ vue-router.esm.js?880d:1911
    step @ vue-router.esm.js?880d:1649
    step @ vue-router.esm.js?880d:1656
    runQueue @ vue-router.esm.js?880d:1660
    (anonymous) @ vue-router.esm.js?880d:1906
    step @ vue-router.esm.js?880d:1649
    (anonymous) @ vue-router.esm.js?880d:1653
    (anonymous) @ vue-router.esm.js?880d:1891
    (anonymous) @ vue-router.esm.js?880d:1727
    iterator @ vue-router.esm.js?880d:1870
    step @ vue-router.esm.js?880d:1652
    step @ vue-router.esm.js?880d:1656
    step @ vue-router.esm.js?880d:1656
    (anonymous) @ vue-router.esm.js?880d:1653
    (anonymous) @ vue-router.esm.js?880d:1891
    (anonymous) @ router.js?10e1:41
    iterator @ vue-router.esm.js?880d:1870
    step @ vue-router.esm.js?880d:1652
    step @ vue-router.esm.js?880d:1656
    runQueue @ vue-router.esm.js?880d:1660
    confirmTransition @ vue-router.esm.js?880d:1899
    transitionTo @ vue-router.esm.js?880d:1801
    push @ vue-router.esm.js?880d:2099
    push @ vue-router.esm.js?880d:2416
    handler @ vue-router.esm.js?880d:404
    invoker @ vue.runtime.esm.js?a427:1733
    (anonymous) @ quasar.esm.js?f2cf:9631
    hideCurrentSide @ quasar.esm.js?f2cf:8957
    boundFn @ vue.runtime.esm.js?a427:164
    trigger @ quasar.esm.js?f2cf:9630
    boundFn @ vue.runtime.esm.js?a427:164
    click @ quasar.esm.js?f2cf:9610
    invoker @ vue.runtime.esm.js?a427:1733
    vue.runtime.esm.js?a427:430 [Vue warn]: Error in directive ripple unbind hook: “TypeError: Cannot read property ‘h’ of undefined”

    found in

    —> <SubscriberComponent> at D:\BitBucket\hoyne.northshore.foxsuite.cms\src\components\views\subscriber\subscriber.vue
    <QModalLayout>
    <QModal>
    <Subscribers> at D:\BitBucket\hoyne.northshore.foxsuite.cms\src\components\views\subscriber\subscribers.vue
    <QLayout>
    <Main> at D:\BitBucket\hoyne.northshore.foxsuite.cms\src\components\views\dashboard\main.vue
    <App> at D:\BitBucket\hoyne.northshore.foxsuite.cms\src\App.vue
    <Root>
    warn @ vue.runtime.esm.js?a427:430
    handleError @ vue.runtime.esm.js?a427:515
    callHook$1 @ vue.runtime.esm.js?a427:5485
    _update @ vue.runtime.esm.js?a427:5447
    updateDirectives @ vue.runtime.esm.js?a427:5389
    unbindDirectives @ vue.runtime.esm.js?a427:5383
    invokeDestroyHook @ vue.runtime.esm.js?a427:5025
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    patch @ vue.runtime.esm.js?a427:5293
    Vue.$destroy @ vue.runtime.esm.js?a427:2372
    destroy @ vue.runtime.esm.js?a427:3399
    invokeDestroyHook @ vue.runtime.esm.js?a427:5024
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    patch @ vue.runtime.esm.js?a427:5293
    Vue.$destroy @ vue.runtime.esm.js?a427:2372
    destroy @ vue.runtime.esm.js?a427:3399
    invokeDestroyHook @ vue.runtime.esm.js?a427:5024
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    patch @ vue.runtime.esm.js?a427:5293
    Vue.$destroy @ vue.runtime.esm.js?a427:2372
    destroy @ vue.runtime.esm.js?a427:3399
    invokeDestroyHook @ vue.runtime.esm.js?a427:5024
    patch @ vue.runtime.esm.js?a427:5293
    Vue.$destroy @ vue.runtime.esm.js?a427:2372
    destroy @ vue.runtime.esm.js?a427:3399
    invokeDestroyHook @ vue.runtime.esm.js?a427:5024
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    patch @ vue.runtime.esm.js?a427:5293
    Vue.$destroy @ vue.runtime.esm.js?a427:2372
    destroy @ vue.runtime.esm.js?a427:3399
    invokeDestroyHook @ vue.runtime.esm.js?a427:5024
    removeVnodes @ vue.runtime.esm.js?a427:5040
    patch @ vue.runtime.esm.js?a427:5365
    Vue._update @ vue.runtime.esm.js?a427:2319
    updateComponent @ vue.runtime.esm.js?a427:2435
    get @ vue.runtime.esm.js?a427:2774
    run @ vue.runtime.esm.js?a427:2844
    flushSchedulerQueue @ vue.runtime.esm.js?a427:2611
    (anonymous) @ vue.runtime.esm.js?a427:651
    nextTickHandler @ vue.runtime.esm.js?a427:598
    Promise resolved (async)
    timerFunc @ vue.runtime.esm.js?a427:613
    queueNextTick @ vue.runtime.esm.js?a427:661
    queueWatcher @ vue.runtime.esm.js?a427:2698
    update @ vue.runtime.esm.js?a427:2834
    notify @ vue.runtime.esm.js?a427:728
    reactiveSetter @ vue.runtime.esm.js?a427:958
    (anonymous) @ vue-router.esm.js?880d:2390
    (anonymous) @ vue-router.esm.js?880d:2389
    updateRoute @ vue-router.esm.js?880d:1924
    (anonymous) @ vue-router.esm.js?880d:1802
    (anonymous) @ vue-router.esm.js?880d:1911
    step @ vue-router.esm.js?880d:1649
    step @ vue-router.esm.js?880d:1656
    runQueue @ vue-router.esm.js?880d:1660
    (anonymous) @ vue-router.esm.js?880d:1906
    step @ vue-router.esm.js?880d:1649
    (anonymous) @ vue-router.esm.js?880d:1653
    (anonymous) @ vue-router.esm.js?880d:1891
    (anonymous) @ vue-router.esm.js?880d:1727
    iterator @ vue-router.esm.js?880d:1870
    step @ vue-router.esm.js?880d:1652
    step @ vue-router.esm.js?880d:1656
    step @ vue-router.esm.js?880d:1656
    (anonymous) @ vue-router.esm.js?880d:1653
    (anonymous) @ vue-router.esm.js?880d:1891
    (anonymous) @ router.js?10e1:41
    iterator @ vue-router.esm.js?880d:1870
    step @ vue-router.esm.js?880d:1652
    step @ vue-router.esm.js?880d:1656
    runQueue @ vue-router.esm.js?880d:1660
    confirmTransition @ vue-router.esm.js?880d:1899
    transitionTo @ vue-router.esm.js?880d:1801
    push @ vue-router.esm.js?880d:2099
    push @ vue-router.esm.js?880d:2416
    handler @ vue-router.esm.js?880d:404
    invoker @ vue.runtime.esm.js?a427:1733
    (anonymous) @ quasar.esm.js?f2cf:9631
    hideCurrentSide @ quasar.esm.js?f2cf:8957
    boundFn @ vue.runtime.esm.js?a427:164
    trigger @ quasar.esm.js?f2cf:9630
    boundFn @ vue.runtime.esm.js?a427:164
    click @ quasar.esm.js?f2cf:9610
    invoker @ vue.runtime.esm.js?a427:1733
    vue.runtime.esm.js?a427:519 TypeError: Cannot read property ‘h’ of undefined
    at unbind (quasar.esm.js?f2cf:1240)
    at callHook$1 (vue.runtime.esm.js?a427:5483)
    at _update (vue.runtime.esm.js?a427:5447)
    at updateDirectives (vue.runtime.esm.js?a427:5389)
    at Array.unbindDirectives (vue.runtime.esm.js?a427:5383)
    at invokeDestroyHook (vue.runtime.esm.js?a427:5025)
    at invokeDestroyHook (vue.runtime.esm.js?a427:5029)
    at invokeDestroyHook (vue.runtime.esm.js?a427:5029)
    at invokeDestroyHook (vue.runtime.esm.js?a427:5029)
    at invokeDestroyHook (vue.runtime.esm.js?a427:5029)
    handleError @ vue.runtime.esm.js?a427:519
    callHook$1 @ vue.runtime.esm.js?a427:5485
    _update @ vue.runtime.esm.js?a427:5447
    updateDirectives @ vue.runtime.esm.js?a427:5389
    unbindDirectives @ vue.runtime.esm.js?a427:5383
    invokeDestroyHook @ vue.runtime.esm.js?a427:5025
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    patch @ vue.runtime.esm.js?a427:5293
    Vue.$destroy @ vue.runtime.esm.js?a427:2372
    destroy @ vue.runtime.esm.js?a427:3399
    invokeDestroyHook @ vue.runtime.esm.js?a427:5024
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    patch @ vue.runtime.esm.js?a427:5293
    Vue.$destroy @ vue.runtime.esm.js?a427:2372
    destroy @ vue.runtime.esm.js?a427:3399
    invokeDestroyHook @ vue.runtime.esm.js?a427:5024
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    patch @ vue.runtime.esm.js?a427:5293
    Vue.$destroy @ vue.runtime.esm.js?a427:2372
    destroy @ vue.runtime.esm.js?a427:3399
    invokeDestroyHook @ vue.runtime.esm.js?a427:5024
    patch @ vue.runtime.esm.js?a427:5293
    Vue.$destroy @ vue.runtime.esm.js?a427:2372
    destroy @ vue.runtime.esm.js?a427:3399
    invokeDestroyHook @ vue.runtime.esm.js?a427:5024
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    invokeDestroyHook @ vue.runtime.esm.js?a427:5029
    patch @ vue.runtime.esm.js?a427:5293
    Vue.$destroy @ vue.runtime.esm.js?a427:2372
    destroy @ vue.runtime.esm.js?a427:3399
    invokeDestroyHook @ vue.runtime.esm.js?a427:5024
    removeVnodes @ vue.runtime.esm.js?a427:5040
    patch @ vue.runtime.esm.js?a427:5365
    Vue._update @ vue.runtime.esm.js?a427:2319
    updateComponent @ vue.runtime.esm.js?a427:2435
    get @ vue.runtime.esm.js?a427:2774
    run @ vue.runtime.esm.js?a427:2844
    flushSchedulerQueue @ vue.runtime.esm.js?a427:2611
    (anonymous) @ vue.runtime.esm.js?a427:651
    nextTickHandler @ vue.runtime.esm.js?a427:598
    Promise resolved (async)
    timerFunc @ vue.runtime.esm.js?a427:613
    queueNextTick @ vue.runtime.esm.js?a427:661
    queueWatcher @ vue.runtime.esm.js?a427:2698
    update @ vue.runtime.esm.js?a427:2834
    notify @ vue.runtime.esm.js?a427:728
    reactiveSetter @ vue.runtime.esm.js?a427:958
    (anonymous) @ vue-router.esm.js?880d:2390
    (anonymous) @ vue-router.esm.js?880d:2389
    updateRoute @ vue-router.esm.js?880d:1924
    (anonymous) @ vue-router.esm.js?880d:1802
    (anonymous) @ vue-router.esm.js?880d:1911
    step @ vue-router.esm.js?880d:1649
    step @ vue-router.esm.js?880d:1656
    runQueue @ vue-router.esm.js?880d:1660
    (anonymous) @ vue-router.esm.js?880d:1906
    step @ vue-router.esm.js?880d:1649
    (anonymous) @ vue-router.esm.js?880d:1653
    (anonymous) @ vue-router.esm.js?880d:1891
    (anonymous) @ vue-router.esm.js?880d:1727
    iterator @ vue-router.esm.js?880d:1870
    step @ vue-router.esm.js?880d:1652
    step @ vue-router.esm.js?880d:1656
    step @ vue-router.esm.js?880d:1656
    (anonymous) @ vue-router.esm.js?880d:1653
    (anonymous) @ vue-router.esm.js?880d:1891
    (anonymous) @ router.js?10e1:41
    iterator @ vue-router.esm.js?880d:1870
    step @ vue-router.esm.js?880d:1652
    step @ vue-router.esm.js?880d:1656
    runQueue @ vue-router.esm.js?880d:1660
    confirmTransition @ vue-router.esm.js?880d:1899
    transitionTo @ vue-router.esm.js?880d:1801
    push @ vue-router.esm.js?880d:2099
    push @ vue-router.esm.js?880d:2416
    handler @ vue-router.esm.js?880d:404
    invoker @ vue.runtime.esm.js?a427:1733
    (anonymous) @ quasar.esm.js?f2cf:9631
    hideCurrentSide @ quasar.esm.js?f2cf:8957
    boundFn @ vue.runtime.esm.js?a427:164
    trigger @ quasar.esm.js?f2cf:9630
    boundFn @ vue.runtime.esm.js?a427:164
    click @ quasar.esm.js?f2cf:9610
    invoker @ vue.runtime.esm.js?a427:1733

    Located the problem and I just patch the logic so that it will not throw an exception

    IN qasasr.esm.js
    \node_modules\quasar-framework\dist\quasar.esm.js(1182):var Ripple = {

    ____ CHANGES ____
    var Ripple = {

    unbind: function unbind (el, ref) {
    var modifiers = ref.modifiers;

    if (shouldAbort(modifiers)) {
      return
    }
    
    var ctx = el.__qripple;
    if (ctx) {  // <-- ADDED 
      Object.keys(ctx.h).forEach(function (evt) {
        el.removeEventListener(evt, ctx.h[evt], false);
      });
    }  // <-- ADDED 
    
    if (el && el.__qripple) {  // <-- ADDED 
      delete el.__qripple;
    }  // <-- ADDED 
    

    }
    };

    Enjoy


  • Admin

    Hi, Can you still reproduce it on latest v0.14.x? If yes, can you “quasar init folder” and make a basic reproduction case then post it on github pls?


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.