Quasar: QTable does not satisfy the constraint 'Vue'

[Eldar-X]

During the build process, I get an error:

7320:33 Type 'QTable' does not satisfy the constraint 'Vue'.
  Types of property 'data' are incompatible.
    Type 'any[] | undefined' is not assignable to type '(() => object) | undefined'.
      Type 'any[]' is not assignable to type '() => object'.
    7318 |         QTabPanel?: VueConstructor<QTabPanel>
    7319 |         QTabPanels?: VueConstructor<QTabPanels>
  > 7320 |         QTable?: VueConstructor<QTable>
         |                                 ^
    7321 |         QTd?: VueConstructor<QTd>
    7322 |         QTh?: VueConstructor<QTh>
    7323 |         QTr?: VueConstructor<QTr>

[Eldar-X]

Please can you update type definition of data property to () => object.

[rstoenescu]

That's not our type definition. It's Vue's one. There's a difference between the types of the object with which a Vue component gets instantiated and the instance itself. The object with which a Vue component gets instantiated has a data() method, yes. But the instance of the component only has the property data. So, are you sure that you're specifying the right types?

[Eldar-X]

I just did some more research and found that the problem only occurs when I add "import 'vue-class-component/hooks'". But this problem only exists in QTable. https://github.com/vuejs/vue-class-component#enabling-custom-hooks-auto-complete-in-typescript

[IlCallo]

Can you make a repro? It's hard to check what's the problem on Quasar part without it, and you could discover the problem is somewhere else while doing it :)

[Eldar-X]

Sure, here is fresh repo https://github.com/Eldar-X/quasar-issue : )

[IlCallo]

@rstoenescu found out the problem: QTable extends Vue in the generated interface, but you've defined a prop called data which overrides the property with same name on the Vue interface. Being the types generated dynamically, this problem could not be detected during development.

export interface QTable extends Vue {
    // ...
    /**
     * Rows of data to display
     */
    data? : any[]
    // ...
}

https://github.com/quasarframework/quasar/blob/aef170bd325d8be12ad08d849eabfbe999d36da9/ui/src/components/table/QTable.json#L9-L14

data should probably be refactored as source or rowData or similar, but it's a breaking change.
Changing the API to "type": [ "Array", "Any" ], won't work because it checks the adherence to the props declaration in the code (which is an Array) and throw an error during build.

Even if I allow the tsType field on Array-type props and put a patch leveraging the custom API injection mechanism we added some months ago, I'm not able to solve the issue.

Either we do the breaking change into the API or we put the wrong type on purpose to make it compliant to Vue type extension.

Check out https://github.com/IlCallo/quasar/commit/0b327c7c8d4aea986340e4528ace8928d4a7d062 as an example of the latter.

[luckylooke]

Is there an example of temporary fix? 🙏 🙏 🙏

[Eldar-X]

Is there an example of temporary fix? 🙏 🙏 🙏

"skipLibCheck": true in tsconfig.json

[luckylooke]

I have found tsconfig compiler option: skipLibCheck: true, saved me for now 😅

{
  "compilerOptions": {
     ...
    "skipLibCheck": true
     ...
  }
  ...
}

combined with

@Component({
  components: {
    QTable: (QTable as unknown) as VueConstructor<Vue>,
...

ref: https://github.com/nuxt/typescript/issues/354

[Eldar-X]

For me it's working without second part :)
It would be nice if the Quasar team solved this problem. It's been exactly 6 months since I opened my issue :(

[IlCallo]

@Eldar-X we know and we'd love to fix this too :(
But fixing it the proper way would generate a breaking change for everyone using this component, fixing it with a wrong type would only bring more confusion
We'll fix this with quasar v2, when we can do breaking changes