Closed NeluQi closed 5 months ago
Hi,
I start running into the same warning in my app when using DataTable component.
The issue happens when calling t
for localization in the header property like in the example below for field code
.
<template>
<div class="card">
<DataTable :value="products" tableStyle="min-width: 50rem">
<Column field="code" :header="$t('message.hello')"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column header="Quantity">
<template #body="{ data }">
{{ data.quantity }}
</template>
</Column>
</DataTable>
</div>
</template>
Hi,
Thanks a lot for the report! Could this issue be related to vue-i18n? Could you please try your case without it? If the problem persists, could you please attach a stackblitz link for us to replicate?
@mertsincan
Thank you so much, it as you said as it seem the issue is in vue-i18n.
I tried to reproduce the issue by replacing$t(...)
with computed/ref/function but none of them introduce the warning.
I will see vue-i18n repo and create an issue there if it does not exist.
https://stackblitz.com/edit/vfvinf-gk3zzu?file=src%2FApp.vue
Edit: added stackblitz link
@NeluQi @alwaqfi If you get to the bottom of this, could you please post a clue or two on how to resolve it? This showed up for me as well now for views using DataTable + vue-i18n.
More interesting things, now I have a lot of errors and the whole site is crashing
I removed the DataTable from the component and everything was fixed. The problem is clearly in the DataTable
I rolled back to version 3.45.0 now and the site stopped crashing completely (at 3.46.0 the page completely died, everything stopped working). But "Vue warn]: getCurrentInstance() called inside a computed getter." remained
Most likely this is due to $t(...). But still this is a DataTable problem.
Also in 3.46.0 DataTable breaks my project completely. This is very very bad
@NeluQi Interesting! Could you please attach a sample project for me to replicate?
Most likely this is due to $t(...). But still this is a DataTable problem.
I disagree that this is a DataTable issue. It appends the text in the DataTable header directly to the DOM. It does not perform any operation on this text. But, if you can send me a sample project, I can examine it in detail.
Try adding a column-key prop for any column that doesn’t have either that or a field prop. That solved it for me, I had a table where the last column was a placeholder for some row action buttons.
Thanks @rubjo! https://github.com/primefaces/primevue/issues/4646 I made such a change to render custom wrapper columns. If you could attach sample projects related to the problems you are currently having, I will try to fix them in the next version. Additionally, if my improvement causes too much trouble in existing projects, I can connect this improvement to a prop and return it to its old structure. I need more feedback to be able to do all this :)
@mertsincan Thanks for your activity. Unfortunately, I don’t have time to put together a demo project yet. My real project is large and has a lot of dependencies.
I can say that this warning was not present in version 3.39.0 Maybe a little later it will be possible to give more information
@NeluQi Did you try my suggestion: make sure all Columns have a column-key prop?
As mentioned, this fixed it for me (I had all the same errors as you).
Previously, I could have DataTables with prop-less Columns like this:
<Column>
…
</Column>
Now, it seems I have to have either
<Column field="field">
or
<Column column-key="key">
…to avoid everything crashing
I start having the same issue as @NeluQi in different component.
@rubjo last response solved it for me. Seems Column
requires at least 1 prop (You can have only header
prop and it will render correctly). This is the error I was getting when Column
didn't have any props but can't say if it is the same for NeluQi.
this.column.props is null
getColumnPT8 https://fq9d53-42dx--5173--f7aa08df.local-corp.webcontainer.io/node_modules/.vite/deps/primevue_datatable.js?v=7f2e5a0e:4345
render$2 https://fq9d53-42dx--5173--f7aa08df.local-corp.webcontainer.io/node_modules/.vite/deps/primevue_datatable.js?v=7f2e5a0e:4601
renderComponentRoot https://fq9d53-42dx--5173--f7aa08df.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-UABPGWK3.js?v=53760396:2318
componentUpdateFn https://fq9d53-42dx--5173--f7aa08df.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-UABPGWK3.js?v=53760396:7449
run https://fq9d53-42dx--5173--f7aa08df.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-UABPGWK3.js?v=53760396:421
update https://fq9d53-42dx--5173--f7aa08df.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-UABPGWK3.js?v=53760396:7580
You can reproduce the error by removing header="myField"
in Stackblitz link below.
Stackblitz: https://stackblitz.com/edit/fq9d53?file=src%2FApp.vue
@rubjo
I'll do this today. I will remove $t(...) and do as you said, I have a big project, when I finish I will write here
I found a solution, is bug vue 3.4.6
fix in 3.4.7
https://github.com/vuejs/core/blob/main/CHANGELOG.md
Perhaps others have had this problem for other reasons. I won’t close the ticket yet, maybe someone will write their own cases
Thanks a lot, @everyone! Nice team works ;) I will take a look again before the next release.
Hi again,
I haven't seen any issues on the Primevue side. For now, closed. If the problem persists, please reopen this ticket.
Best Regards,
Describe the bug
chunk-7F2UDWYG.js:1774 [Vue warn]: getCurrentInstance() called inside a computed getter. This is incorrect usage as computed getters are not guaranteed to be executed with an active component instance. If you are using a composable inside a computed getter, move it ouside to the setup scope.
Reproducer
no
PrimeVue version
3.46.0
Vue version
3.x
Language
TypeScript
Build / Runtime
Vite
Browser(s)
No response
Steps to reproduce the behavior
No response
Expected behavior
No response