vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.75k stars 8.35k forks source link

"Unsafe member access" errors when using exposed methods from template `ref`s #12433

Closed paveloom closed 3 days ago

paveloom commented 3 days ago

Vue version

3.5.13

Link to minimal reproduction

https://github.com/paveloom-o/vue-playground/tree/use-template-ref

Steps to reproduce

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

What is expected?

No errors should be reported.

What is actually happening?

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

System Info

System:
    OS: Linux 6.11 cpe:/o:nixos:nixos:24.11 24.11 (Vicuna)
    CPU: (16) x64 AMD Ryzen 7 5700U with Radeon Graphics
    Memory: 20.45 GB / 30.68 GB
    Container: Yes
    Shell: 3.7.1 - /run/current-system/sw/bin/fish
  Binaries:
    Node: 23.1.0 - /nix/store/bc1blqcb391vjj251had3dbrnq5rb7md-nodejs-23.1.0/bin/node
    npm: 10.9.0 - /nix/store/bc1blqcb391vjj251had3dbrnq5rb7md-nodejs-23.1.0/bin/npm
  npmPackages:
    vue: ^3.5.13 => 3.5.13

Any additional comments?

App.vue
```vue ```
Modal.vue
```vue ```

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.

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 https://github.com/vuejs/core/issues/6882.

edison1105 commented 3 days ago

Yes, It is a duplicate of #6882. But it doesn't seem to be an issue with vue or language-tools, because the type hints for modal.value and close are correct. It seems more like a problem with typescript-lint.