"unsafe member access" errors when using exposed methods from Vue's template `ref`s

[paveloom]

Before You File a Bug Report Please Confirm You Have Done The Following...

• I'm using eslint-plugin-vue.
• I'm sure the problem is a parser problem. (If you are not sure, search for the issue in eslint-plugin-vue repo and open the issue in eslint-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 of eslint-plugin-vue and vue-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";

import Modal from "@/components/Modal.vue";

const modal = useTemplateRef<InstanceType<typeof Modal>>("modal");

function close() {
  modal.value?.close();
}
</script>

<template>
  <button @click="modal?.open!">
    Open modal
  </button>
  <button @click="close">
    Close modal
  </button>
  <Teleport to="body">
    <Modal ref="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>
  <div v-if="isOpen">
    Modal
  </div>
</template>

The intent is to use the exported functions from an instance of the Modal component whenever needed. For that, I use Vue's useTemplateRef function and the defineExpose 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 the Modal component, namely, open and close. However, I use these functions differently in the App component. The open method is used directly in the template section, whereas for the close function I've created a wrapper of the same name in the script setup section. Note that the error of using an any value is reported only on the wrapper (specifically, on the call modal.value?.close()).

This issue is also eerily similar to vuejs/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 from vuejs/core#12433 and typescript-eslint/typescript-eslint#10359.

Repro Steps

1. git clone --branch use-template-ref https://github.com/paveloom-o/vue-playground.git
2. cd vue-playground
3. direnv allow (OPTIONAL: if you have direnv and nix-direnv installed)
4. npm install
5. npm run lint

[litchia]

This is really troubling me

[douira]

I also am experiencing issues like this. They are especially frustrating because both ways of doing refs, ref and useTemplateRef, have this problem and there doesn't seem to be a way to have eslint work correctly on files that have template refs currently.

[hannes-qoe]

This is still an issue which really limits the use my team and I can get from the defineExpose feature.

[gtbuchanan]

Have you tried using different names for the ref attribute and useTemplateRef variables? For example:

<script setup lang="ts">
import { useTemplateRef } from "vue";

import Modal from "@/components/Modal.vue";

const modal = useTemplateRef("modalRef");

function close() {
  modal.value?.close();
}
</script>

<template>
  ...
  <Teleport to="body">
    <Modal ref="modalRef" />
  </Teleport>
</template>

It's not immediately obvious, but the docs do this consistently. Your example uses ref="modal" and const modal, which I believe causes a type conflict.

[hannes-qoe]

A clue to anyone investigating this: calling the template ref's methods works inside the template. It is only appearing as error typed when used in the script.