Quasar -> RangeError: Maximum call stack size exceeded.

[mwessendorf]

Hi guys,
I run into a problem when adding your solution into an Quasar app.
It's placed in a pop up dialog and just initiated for testing purpose with expression '0 3 * * *'.
All works fine and as expected but when I click on a select which opens up the list of options my console shows me multiple times this error:
quasar.es.js:1126 Uncaught RangeError: Maximum call stack size exceeded.
at quasar.es.js:1126:267
at Cn (quasar.es.js:691:21)
at ge (quasar.es.js:1124:7)

I understand that this looks like the error is located in quasar but it only happens in combination with your lib.

Do you have any idea how to solve that? Maybe there is a "hidden" circular reference somewhere on your side?
A push in the right direction would be really appreciated. Thanks for the nice project =)

[abichinger]

Hi

I'm glad you tried out my Vue component.

I don't see the error in the console with this example:
https://stackblitz.com/edit/vue3-vite-typescript-quasar-starter-g3ip3e?file=package.json,src%2Fcomponents%2FHelloWorld.vue

Can you please tell me your package versions of vue, quasar and @vue-js-cron/quasar.

[mwessendorf]

@abichinger Many thanks for your answer.

I have the following set up:

vue v3.3.4
quasar v2.12.3
@quasar/cli v2.2.1
@quasar/app-vite v1.4.3
@vue-js-cron/quasar: v1.1.3

Many thanks. If you need more information please let me know.

[abichinger]

So far I haven't been able to reproduce your error.

Could you please provide a reproducible code example?

[mwessendorf]

Hi,
I jumped in again to be sure that the issue just occurs when added to dialog just to make sure I'm pointing in the right direction.
Small example to reproduce the issue would be:

<template>
<q-dialog v-model="showCronExpression" persistent>
  <q-card style="min-width: 300px">
    <q-card-section>
      <cron-quasar v-model="cronExpression"
                   locale="en"
      />
    </q-card-section>
    <q-card-actions align="right">
      <q-btn flat label="Cancel" v-close-popup />
    </q-card-actions>
  </q-card>
</q-dialog>
</template>
<script setup>
import {ref} from "vue";

const cronExpression = ref("0 3 * * *")
const showCronExpression = ref(true)
</script>

When clicking on the select fields you should see the error in console. Outside of a dialog it is working as expected without that error.
https://stackblitz.com/edit/vue3-vite-typescript-quasar-starter-p1az8g?file=package.json,src%2Fcomponents%2FHelloWorld.vue

[abichinger]

🎉 This issue has been resolved in version 1.1.4 🎉

The release is available on npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

[abichinger]

Hey, that was a tricky one 👍

While inspecting the stack trace, I noticed that some of the quasar components have been bundled with @vue-js-cron/quasar. I resolved that by removing @quasar/vite-plugin.

It seems that also solved your problem.

https://stackblitz.com/edit/vue3-vite-typescript-quasar-starter-aejtzf?file=src%2Fcomponents%2FHelloWorld.vue

[mwessendorf]

I updated and tested 1.1.4. Can confirm that my reported issue was solved 🎉

Many thanks!