DataTable: Maximum recursive updates exceeded in component <DataTable>

[caputech]

Describe the bug

Starting with Vue v3.4.15, DataTable throws the following error when Row Grouping is used in combination with Advanced (menu type) filters.

Uncaught (in promise) Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

Reproducer

https://stackblitz.com/edit/3avo74?file=src%2FApp.vue

PrimeVue version

3.45.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

Go to reproducer and check the console.

There are some related issues raised in the Vue repository. https://github.com/vuejs/core/issues?q=maximum+recursive+updates

Expected behavior

No response

[caputech]

Any update on this one? It is a fairly significant issue for us. Thanks.

[jsisson]

@caputech I was having this same issue, and after double-checking I had realized I had accidentally messed up the "filters" variable in my script;

<template>
<DataTable
    v-model="filters"
   .../>
</template>
<script setup>
import { ref } from "vue";
const filters = ref(); // OOPS
</script>

When I fixed the filters variable this error went away;

...
const filters = ref({
    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
    name: { value: null, matchModel: FilterMatchMode.CONTAINS },
    (etc)
});
...

Maybe this helps you too

[caputech]

Thanks, but no, I have them set correctly. It seems to be a result of using the filtering and grouping together. Only appeared in recent VUE updates as they are enforcing conventions.

[Marlight]

I have the same error from Vue version >= 3.4.15

const filters: Ref<DataTableFilterMeta> = ref({
    global: {value: null, matchMode: FilterMatchMode.CONTAINS}
});

<DataTable
                    :value="productsMock"
                    v-model:filters="filters"
                    row-hover
                    striped-rows
                    size="small"
                    rowGroupMode="subheader"
                    group-rows-by="category"
                    sort-field="category"
                    data-key="id"
                    :sort-order="1"
                    :global-filter-fields="['title', 'tags']"
                > <!-- ... --> </DataTable>

Uncaught (in promise) Maximum recursive updates exceeded in component <DataTable>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

[satyavh]

I run into this error constantly, really annoying. Datatables seems to have a nag for mutating its props for no apparent reason

[nonpsisvi1983]

I was having the same issue, and comparing exampIe and my code I had realized I had non existing field in my filters

Before:
const filters = ref({
global: {value: null, matchMode: FilterMatchMode.CONTAINS},
name: {value: null, matchMode: FilterMatchMode.STARTS_WITH}, # field does not exists
dns: {value: null, matchMode: FilterMatchMode.STARTS_WITH},
});

After:
const filters = ref({
global: {value: null, matchMode: FilterMatchMode.CONTAINS},
ip: {value: null, matchMode: FilterMatchMode.STARTS_WITH},
dns: {value: null, matchMode: FilterMatchMode.STARTS_WITH},
});

[cajund]

I've been trying every which way to get aware from this without significant hacks. Consider the following:

      <DataTable :value="LinkStore.links.out_links" tableStyle="">
        <Column field="from_node" header="From Local Node">
          <template #body="props">
            <div>{{ nodes[props.data.from_node] }}</div>
          </template>
        </Column>

That nodes variable is local, and is an object keyed by that "from_node" id. This code produces an object. This works, the object is printed to my table. However, changing that to the following (just referencing the field):

<div>{{ nodes[props.data.from_node].public_name }}</div>

Will cause this recursion error to happen. The nodes local var is indicated to be "reactive" in the Vue tools, and I and convinced this has something to do with this error. I've tried lots of different approaches, all with the same result (referencing a field causes the error). What isn't clear is while I can display the whole object, I can't display a single field.

How can this not be a bug?

Thanks.

[CrispinStichartFNSB]

I ran into this same issue, and essentially it seems that any exceptions thrown from code that runs in a <Column>'s slot will be eaten, and then trigger this endless recursion.

I have a test app here that displays this behavior.

https://stackblitz.com/edit/vitejs-vite-ywc6c5?file=src%2FApp.vue

(Edit: I think I messed else up with that stackblitz app, I'm fixing now fixed, still displays the recursion error)

[cajund]

I can confirm this as well. There's some oddities with this component, like due to the number of moving pieces. But you are correct, any exception will exhibit this behavior - finding the specific exception can be a bit of a challenge.

The issue I posted was slightly different, but given your report, replicating it may be challenging.

Perhaps this component can be adjusted to trap these exceptions and limit the responsive behavior - presenting the error for readily to the user.

Cheers!

[changhua0313]

We ran into this issue.
Use filters in columngroup / column

<column ...>
<template #filter="{ filterModel }">
......



vue: 3.4.21, primevue: 4.2.5 -> Maximum recursive updates exceeded in component
vue: 3.4.21, primevue: 3.53.0 -> Works fine
Is there any work around for primevue 4? Any hint is appreciated.