Question: Property 'chart' does not exist on type 'CreateComponentPublicInstance

[jcortega]

Hi, I added the vue3 echarts component globally in main.ts as shown below:

main.ts

import Notifications from '@kyvg/vue3-notification';
import { VueEcharts } from 'vue3-echarts';

import App from './App.vue';
import router from './router';

import './styles/main.css';
import Iam from './common/iam';

const app = createApp(App);

app.use(Notifications);
app.use(createPinia());
app.use(VueAxios, axios);
app.use(router);

app.component('vue-echarts', VueEcharts)

Iam.init();

app.mount('#app');

page vue:

<template>
...
                <vue-echarts :option="option" style="height: 500px" ref="chart" />
...
</template>

<script setup lang="ts">
-----snipped---

const option = reactive({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
});
-----snipped---
</script>

It works in dev mode, but when trying to check type using vue-tsc. I get the error below.

npx vue-tsc --noEmit -p tsconfig.vitest.json 

node_modules/vue3-echarts/index.ts:148:14 - error TS2339: Property 'chart' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{ option: { type: PropType<EChartsOption>; }; theme: { type: StringConstructor; default: string; }; groupId: { type: StringConstructor; default: null; }; loadingOption: { ...; }; initCfg: PropType<...>; }>> & { ...; }, ... 17 more ..., { ...; }>'.

148         this.chart.hideLoading();

Package versions:

     "vue": "^3.2.41"
    "vue3-echarts": "^1.1.0",
    "typescript": "~4.7.4",
    "vite": "^3.1.8",
    "vitest": "^0.24.5",
    "vue-tsc": "^1.0.8"

Are there any option that I should enable?

[CarterLi]

"skipLibCheck": true in tsconfig.json may help

[jcortega]

tried "skipLibCheck": true, but still got the same error. Also, tried to explicitly added node_modules to tsconfig exclude, but no luck either. For now I have set "noImplicitThis" to false in tsconfig. Looks to have fixed the issue, but not sure what the implication is. Vue recommended setting is true: https://github.com/vuejs/tsconfig/blob/main/tsconfig.json#L14-L15.

[cesswhite]

Using the "noImplicitThis": false rule in my file tsconfig.json I was able to get around this error, thank you! ✨

[Garry028]

I'm still getting this error after Using the "noImplicitThis": false rule in my file tsconfig.json I'm working with electron and vue @CarterLi @jcortega

[Garry028]

@jcortega @CarterLi Thanks I think It's working now I did not used that in tsconfig.web.json