Failed to deduce type for ref on child component #1630

hongquan · 2021-09-20T11:37:34Z

Checklist

I have tried restarting my IDE and the issue persists.
I have read the FAQ and my problem is not listed.

Tell us about your environment

ESLint version: 7.32.0
eslint-plugin-vue version: 7.18.0
Node version: v14.17.6
Operating System: Ubuntu 21.04

Please show your full configuration:

module.exports = {
  env: {
    browser: true,
    es2021: true,
    'jest/globals': true,
  },
  plugins: [
    'vue',
    '@typescript-eslint',
    'jest',
  ],
  // Ref: https://eslint.vuejs.org/user-guide/#usage
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json'],
    extraFileExtensions: ['.vue'],
  },
  extends: [
    // Vue3 has different guide on <template :key>
    'plugin:vue/vue3-essential',
    'standard',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
  ],
  rules: {
    // Without this, eslint misjudge our store mutation definitions
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': ['error'],
    // We follows braces style in Vue & TypeScript documentation
    'space-before-function-paren': ['error', {
      anonymous: 'always',
      named: 'never',
      asyncArrow: 'always',
    }],
    // Prevent creating change in Git diff
    'comma-dangle': ['error', 'always-multiline'],
    // Allow to skip "await" in front of "router.push".
    '@typescript-eslint/no-floating-promises': ['error', {
      ignoreVoid: true
    }],
    // Our API response follows Python style, camelCase cannot be guaranteed
    'camelcase': 'off',
    'no-void': ['error', { allowAsStatement: true }],
  },
  ignorePatterns: [
    // Config files, don't pass them to @typescript-eslint
    '*.js',
  ]
}

What did you do?

I have a child component in Vue3LottieWeb.vue file, whose setup() function returns play, stop methods.

In parent component, I import that child component and use as template ref:

<script lang="ts">
export default defineComponent({
  setup() {
    const bell = ref<InstanceType<typeof Vue3LottieWeb>>()
    const shakeBell = () => {
      const player = bell.value
      if (player) {
        player.stop()
        player.play()
      }
    }
    return {
      bell,
     shakeBell,
    }
  }
})
</script>

What did you expect to happen?

ESLint should not raise error.

What actually happened?

ESLint complains with "Unsafe assignment of an any value @typescript-eslint/no-unsafe-assignment"

When I hover the code in VS Code, Vetur successfully deduces the type of bell and bell.value, but ESLint not.

Repository to reproduce this issue
https://github.com/hongquan/failed-eslint-vue-ref-child-component

The text was updated successfully, but these errors were encountered:

hongquan · 2021-09-20T14:18:49Z

@ota-meshi Added a reproducible repo.

ota-meshi · 2021-09-20T23:28:03Z

I think your problem is the same problem as [no-unsafe-*] rules section in vuejs/vue-eslint-parser#104. Please track of it issue.

Maxim-Mazurok · 2024-08-29T02:44:01Z

I was a bit confused, because I couldn't reproduce no-unsafe-* issues, because imported component seems to have correct type now. However your reproduction still seems to have the same issue:

I also found another unrelated issue when comparing your .vue and tsx code:

vue-tsc didn't catch type issue with renderer option not matching prop.renderer type.

Anyway, thanks for sharing your repro!

ota-meshi added needs repro Need a repository that can reproduce the problem, or a link to DEMO. needs info labels Sep 20, 2021

ota-meshi added bug upstream issue and removed needs info needs repro Need a repository that can reproduce the problem, or a link to DEMO. labels Sep 20, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Failed to deduce type for ref on child component #1630

Failed to deduce type for ref on child component #1630

Uh oh!

Uh oh!

Uh oh!