Pinia InternalError: too much recursion error when using q-list in Quasar

Question

I' stuck at this error InternalError: too much recursion when using a Pinia Store in my Quasar component, I've done everything I know about it nothing solved.
Can I get a advice here?

Here's my IndexPage.vue, where I call the QList component:

<template>
  <q-page>
      <div class="q-pa-md" style="max-width: 350px">
        <QList />
    </div>
  </q-page>
</template>

<script>
import QList from 'src/components/QList.vue';

export default {
  components: {
    QList
  }
}
</script>

Here's my QList.vue component:

<template>
    <div v-if="loading">Carregando...</div>
    <q-list v-else bordered separator>
        <q-item v-for="item in testData" :key="item.id" clickable v-ripple>
            <q-item-section>{{ item.title }}</q-item-section>
        </q-item>
    </q-list>
</template>

<script>
import { testeStore } from '../stores/teste'
import { defineComponent, computed, onMounted } from 'vue';

export default defineComponent({
    setup () {
        const store = testeStore();

        onMounted(() => {
            store.loadData();
        });

        const testData = computed(() => store.getData());
        const loading = computed(() => store.$state.loading);

        return {
            testData,
            loading
        }

    }
})
</script>

And my testeStore.js store:

import { defineStore } from 'pinia'
import testeData from '../assets/data/testes.json'

export const testeStore = defineStore({
  id: 'teste',
  state: () => ({
    data: [],
    loading: false,
  }),
  getters: {
    getData: state => state.data,
  },
  actions: {
    loadData () {
      try {
        this.loading = true
        this.data = testeData;
      } catch (error) {
        console.log(`Error fetching testes: ${{ error }}`)
      } finally {
        this.loading = false
      }
    }

  }
})

Every component is looking normal, I really don't know where is my problem. Here's a piece of vue warn from console:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" >

Probably unrelated, but `getData` is a getter, not a function, so `const testData = computed(() => store.getData());` should give you "Uncaught TypeError: store.getData is not a function" — Moritz Ringler, Apr 08 '23 at 16:06
@tao this solution didn't work, I still have the error. ```setup () { const store = testeStore(); const { data, loading } = storeToRefs(store) return { data, loading } }``` My `testData` is not `undefined`, I'm getting data if I use a console inside my store. — Lucas Marra, Apr 08 '23 at 20:27
Would you be able to repro the error in a codesandbox? Use [import project](https://codesandbox.io/docs/learn/getting-started/your-first-sandbox). — tao, Apr 08 '23 at 23:12
@tao not working on CodeSandBox, maybe ESLint problem: https://codesandbox.io/s/github/lucaspmarra/frontend-pleno/tree/lucas-marra/beedoo-quasar-client StackBlitz is giving me the same error as local project: https://stackblitz.com/github/lucaspmarra/frontend-pleno/tree/lucas-marra/beedoo-quasar-client — Lucas Marra, Apr 08 '23 at 23:23
I marked the question as duplicate because it has the same warning message and you did specify in your question you already tried that and did not work. You're supposed to document your research. Please read [how much effort is expected of Stack Overflow users](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users). — tao, Apr 08 '23 at 23:23

score 1 · Accepted Answer · answered Apr 09 '23 at 07:17

Just checked the stackblitz and it looks like you're having a naming collision between your own QList component and Quasar's built-in 'q-list' component. Vue treats component names case-insensitively, which is why it's interpreting both 'q-list' and 'QList' as the same component.

To resolve this, you can either try renaming your own QList component to something else that doesn't clash with the Quasar component, such as 'MyQList', or import the Quasar 'q-list' component with an alias instead.

import { Qlist as QuasarList } from 'quasar'

This is a bit sad on my part, but this solution worked like a charm. Indeed, I changed my component to MyQList and it is working fine. Thank you very much. — Lucas Marra, Apr 09 '23 at 15:45

Pinia InternalError: too much recursion error when using q-list in Quasar

1 Answers1