primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
8.69k stars 1.09k forks source link

DataTable: getCurrentInstance() called inside a computed getter. #5047

Closed NeluQi closed 5 months ago

NeluQi commented 5 months ago

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.

image image

image

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

alwaqfi commented 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>
mertsincan commented 5 months ago

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?

alwaqfi commented 5 months ago

@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

rubjo commented 5 months ago

@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.

NeluQi commented 5 months ago

More interesting things, now I have a lot of errors and the whole site is crashing

image

NeluQi commented 5 months ago

I removed the DataTable from the component and everything was fixed. The problem is clearly in the DataTable

NeluQi commented 5 months ago

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

mertsincan commented 5 months ago

@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.

rubjo commented 5 months ago

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.

mertsincan commented 5 months ago

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 :)

NeluQi commented 5 months ago

@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

rubjo commented 5 months ago

@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

alwaqfi commented 5 months ago

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

NeluQi commented 5 months ago

@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

NeluQi commented 5 months ago

I found a solution, is bug vue 3.4.6

fix in 3.4.7

image

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

mertsincan commented 5 months ago

Thanks a lot, @everyone! Nice team works ;) I will take a look again before the next release.

mertsincan commented 5 months ago

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,