Vue's <script setup> imports conflicting with @typescript-eslint/consistent-type-imports

[leonsilicon]

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: 8.7.0
• eslint-plugin-vue version: 8.4.0
• Node version: 16.13.2
• Operating System: macOS

Please show your full configuration:

/* eslint-env node */

const path = require("path");

module.exports = {
	root: true,
	parserOptions: {
		parser: "@typescript-eslint/parser",
		project: path.resolve(__dirname, "tsconfig.json"),
		ecmaVersion: 2018,
		sourceType: "module",
		extraFileExtensions: [".vue"],
	},
	plugins: ["@typescript-eslint", "vue"],
	extends: ["eslint:recommended", "plugin:vue/vue3-recommended"],
	rules: {
		"@typescript-eslint/consistent-type-imports": "error",
	},
	env: {
		'vue/setup-compiler-macros': true
	}
};

What did you do?
Use a Vue component solely as a type in the <script> section and in the <template> section

<script setup lang="ts">
import { ref, onMounted } from "vue";
import MyComponent from "./MyComponent.vue";

type ComponentType = typeof MyComponent extends new () => infer T ? T : never;

const myRef = ref<ComponentType>();
onMounted(() => {
	console.log(myRef.value?.printHello)
});
</script>

<template>
  <MyComponent ref="myRef" />
</template>

What did you expect to happen?
That TypeScript ESLint wouldn't report the @typescript-eslint/consistent-type-imports error, since replacing the import with import type breaks the code:

Without import type:

With import type:

What actually happened?

  3:1  error  All imports in the declaration are only used as types. Use `import type`  @typescript-eslint/consistent-type-imports

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

Repository to reproduce this issue

https://github.com/leonzalion/vue-consistent-type-import-bug

[FloEdelmann]

Related: #1577

[FloEdelmann]

I think there is nothing we can do about this in eslint-plugin-vue, as this error is caused by typescript-eslint and Vue core.

@ota-meshi @mysticatea Maybe vue-eslint-parser could do something to fix this?

[ota-meshi]

I don't think vue-eslint-parser can do anything about it, because there is no way to communicate to the consistent-type-imports rule that a variable is being used as a value.

I think changing the consistent-type-imports rule to ignore variables marked with markVariableAsUsed may work in some cases.
https://eslint.org/docs/developer-guide/working-with-rules#:~:text=passed%20to%20ESLint.-,markVariableAsUsed,-(name)%20%2D%20marks%20a

[FloEdelmann]

I've opened an issue in the typescript-eslint repo: typescript-eslint/typescript-eslint#4508

[liamwang]

Having the same trouble. How is it going?

[ota-meshi]

I think using eslint-plugin-vue v9 will solve this problem. If you still have problems, open a new issue.