Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork2.8k
Description
Before You File a Bug Report Please Confirm You Have Done The Following...
- I have tried restarting my IDE and the issue persists.
- I have updated to the latest version of the packages.
- I havesearched for related issues and found none that matched my issue.
- I haveread the FAQ and my problem is not listed.
Issue Description
This issue was moved fromvuejs/core#12433. It is specific toVue, butmight be coming fromtypescript-eslint.
See the reproduction steps below. Here are the relevant source code files:
App.vue
<script setup lang="ts">import {useTemplateRef }from"vue";importModalfrom"@/components/Modal.vue";const modal=useTemplateRef<InstanceType<typeofModal>>("modal");function close() {modal.value?.close();}</script><template> <button@click="modal?.open!"> Open modal </button> <button@click="close"> Close modal </button> <Teleportto="body"> <Modalref="modal" /> </Teleport></template>
Modal.vue
<script setup lang="ts">import {ref }from"vue";const isOpen=ref(false);function open() {isOpen.value=true;}function close() {isOpen.value=false;}defineExpose({open,close});</script><template> <divv-if="isOpen"> Modal </div></template>
The intent is to use the exported functions from an instance of theModal component whenever needed. For that, I use Vue'suseTemplateRef function and thedefineExpose compiler macro.
While running the lint script, I get the following errors:
src/components/App.vue 9:3 error Unsafe call of a(n) `any` typed value @typescript-eslint/no-unsafe-call 9:16 error Unsafe member access .close on an `any` value @typescript-eslint/no-unsafe-member-accessNote that there are two functions exported from theModal component, namely,open andclose. However, I use these functions differently in theApp component. Theopen method is used directly in thetemplate section, whereas for theclose function I've created a wrapper of the same name in thescript setup section. Note that the error of using anany value is reported only on the wrapper (specifically, on the callmodal.value?.close()).
This issue is also eerily similar tovuejs/core#6882.
Reproduction Repository Link
https://github.com/paveloom-o/vue-playground/tree/use-template-ref
Repro Steps
git clone --branch use-template-ref https://github.com/paveloom-o/vue-playground.gitcd vue-playgrounddirenv allow(OPTIONAL: if you havedirenvandnix-direnvinstalled)npm installnpm run lint
Versions
vue-playground@
├── @eslint/js@9.15.0
├── @tsconfig/strictest@2.0.5
├── eslint-plugin-vue@9.31.0
├── eslint@9.15.0
├── typescript-eslint@8.15.0
├── typescript@5.6.3
├── vue-eslint-parser@9.4.3
├── vue-tsc@2.1.10
└── vue@3.5.13
Node:23.1.0