typescript - Quasar 2: Použití direktivy v-ripple v SFC definovaném s <script setup>

Snažím se používat framework Quasar v2.7.1 (s Vue 3, TypeScript, Pinia a Router) a chci použít syntaxi pro definování SFC podle doporučení v oficiální dokumentaci Vue 3. Ale jakmile změním komponentu s direktivou v-ripple na jakémkoli prvku uvnitř ní, čelím následující chybě:

TypeError: Nelze načíst vlastnosti nedefinovaného (čtení 'config') v updateModifiers (Ripple.js?v=eddf1594:65:45) v beforeMount (Ripple.js?v=eddf1594:112:9) v callWithErrorHandling (runtime-core.esm-bundler.js:155:22) v callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21) v invokeDirectiveHook (runtime-core.esm-bundler.js:2791:13) v mountElement (runtime-core.esm-bundler.js:5180:13) v processElement (runtime-core.esm-bundler.js:5110:13) v patch (runtime-core.esm-bundler.js:5030:21) v ReactiveEffect.componentUpdateFn [jako fn] (runtime-core.esm-bundler.js:5582:21) v ReactiveEffect.run (reactivity.esm-bundler.js:185:25)

Pokud je odstraněna direktiva v-ripple, problém se už znovu neobjeví.

Chcete-li reprodukovat, jednoduše změňte komponentu EssentialLink.vue ve výchozím Quasar boilerplate na

    <template>
     <q-item clickable tag="a" target="_blank" v-ripple>
        <q-item-section v-if="icon" avatar>
          <q-icon :name="props.icon" />
        </q-item-section>
    
        <q-item-section>
          <q-item-label>{{ title }}</q-item-label>
          <q-item-label caption>{{ caption }}</q-item-label>
        </q-item-section>
      </q-item>
    </template>
    
    <script setup lang="ts">
    const props = defineProps<{
      title: string;
      caption: string;
      link: string;
      icon: string;
    }>();
    </script>

Otázka je: je to moje chyba a musím nějak jinak prohlásit direktivu v-ripple. Nebo je to chyba?

Odpověď č. 1

Měl jsem také tento problém a jak navrhl @tony19, prostě jsem downgradoval na [email  a funguje to.