♨️ bug: StackOverflow exception on cordova/capacitor mode

[bazuka5801]

Describe the bug
Now when we create capacitor|cordova project with new Quasar v2, when developing app we get stack overflow if we make a mistake (ex. some template variable is undefined)
When we get error, it is like

do 
 spamWarning('...') 
while (true)

Example repository with one command to reproduce bug:
https://github.com/bazuka5801/quasar-bug-avoid

To Reproduce
Steps to reproduce the behavior:

1. quasar create --branch next (with ts + composition api)
2. quasar upgrade -i (for latest updates)
3. Write in Index.vue (template section) some mistake (ex. {{ someError }})

// Stack overflow scenario (modes)
quasar dev -m cordova -T ios
quasar dev -m capacitor -T ios

// Expected scenario
quasar dev

Expected behavior

Screenshots

Platform (please complete the following information):
Quasar Version: 2.0.0-beta.12
@quasar/app Version: 3.0.0 beta.15
Quasar mode:

• Cordova
• Capacitor

Tested on:

• SPA
• Electron
• Cordova
• Capacitor

OS: Mac OS
Node: 14
Yarn: Latest
Browsers: Chrome, WebKit
iOS: 12

[diadal]

add this to your index.vue

const kek = ref('what is kek')
   return { todos, meta, kek };

[diadal]

you never defined this {{kek}}

<template>
  <q-page class="row items-center justify-evenly">
    <example-component
      title="Example component"
      active
      :todos="todos"
      :meta="meta"
    ></example-component>
    {{kek}}
  </q-page>
</template>

<script lang="ts">
import { Todo, Meta } from 'components/models';
import ExampleComponent from 'components/CompositionComponent.vue';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'PageIndex',
  components: { ExampleComponent },
  setup() {
    const todos = ref<Todo[]>([
      {
        id: 1,
        content: 'ct1'
      },
      {
        id: 2,
        content: 'ct2'
      },
      {
        id: 3,
        content: 'ct3'
      },
      {
        id: 4,
        content: 'ct4'
      },
      {
        id: 5,
        content: 'ct5'
      }
    ]);
    const meta = ref<Meta>({
      totalCount: 1200
    });
    const kek = ref('what is kek')
    return { todos, meta, kek };
  }
});
</script>

[bazuka5801]

@diadal
Problem is not for undefined variable!
Problem with error output

[diadal]

now i get your point

[bazuka5801]

@rstoenescu What external lib should be fixed?

[bazuka5801]

I tested on electron, and that working.
I found bug only for cordova, capacitor and it confused me with bug reason

[rstoenescu]

No time at the moment to fully investigate, but it's somewhere in Vue + vue-loader and Capacitor's way of dealing with errors. Will come back to this when time allows. Currently swamped with the upcoming Webpack 5 release. Will be able to finish my investigation on this ticket in the next days.

[bazuka5801]

Found more info about problem
We may observe recursion function - this is JSON.stringify.
I know, that JSON.stringify is not safe with ref, because it throw stack overflow exception.
I'm sure, we need write safe JSON.stringify for capacitor, and it should fix.
I will try modify capacitor/core and fix bug

[rstoenescu]

@bazuka5801 PRing to Capacitor would be fantastic!
Closing this ticket though as there's nothing we can do within Quasar.

[bazuka5801]

@rstoenescu Done!