Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork77
Description
Before You File a Bug Report Please Confirm You Have Done The Following...
- I'm usingeslint-plugin-vue.
- I'm sure the problem is a parser problem. (If you are not sure, search for the issue ineslint-plugin-vue repo and open the issue ineslint-plugin-vue repo if there is no solution.
- I have tried restarting my IDE and the issue persists.
- I have updated to the latest version of the packages.
What version of ESLint are you using?
9.15.0
What version ofeslint-plugin-vue
andvue-eslint-parser
are you using?
- vue-eslint-parser@9.4.3
- eslint-plugin-vue@9.31.0
What did you do?
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-access
Note 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.
What did you expect to happen?
No errors should have been reported.
What actually happened?
The following errors are reported:
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-access
Link to Minimal Reproducible Example
https://github.com/paveloom-o/vue-playground/tree/use-template-ref
Additional comments
This issue was moved fromvuejs/core#12433 andtypescript-eslint/typescript-eslint#10359.
Repro Steps
git clone --branch use-template-ref https://github.com/paveloom-o/vue-playground.git
cd vue-playground
direnv allow
(OPTIONAL: if you havedirenv
andnix-direnv
installed)npm install
npm run lint