Skip to content

linter: typescript-eslint/consistent-type-imports false positive in .vue files when using typeof alongside template usage #21371

Description

@drylint

What version of Oxlint are you using?

1.59.0

What command did you run?

No response

What does your .oxlintrc.json (or oxlint.config.ts) config file look like?

{
  "plugins": [
    "eslint",
    "typescript",
    "vue"
  ],
  "rules": {
    "typescript/consistent-type-imports": [
      2,
      {
        "disallowTypeAnnotations": false,
        "fixStyle": "separate-type-imports",
        "prefer": "type-imports"
      }
    ]
  }
}

What happened?

Description

When using oxlint with the typescript-eslint/consistent-type-imports rule in .vue files, there is a false positive in certain scenarios.

Normally, importing variables or components and using them in the <template> section works correctly and does not trigger any lint errors.

However, if the imported value is also used with typeof in the <script setup lang="ts"> block, oxlint incorrectly assumes that the import is used only as a type, ignoring its usage in the template. This results in a false positive warning and an incorrect auto-fix.


Reproduction

Case 1: Variable import

No error (expected behavior)

<template>
  <div>
    <ChildComponent :obj="obj" />
  </div>
</template>

<script lang="ts" setup>
import { obj } from './utils'
</script>

False positive when using typeof

<template>
  <div>
    <ChildComponent :obj="obj" />
  </div>
</template>

<script lang="ts" setup>
// oxlint error:
// "All imports in the declaration are only used as types. Use `import type`."
// Auto-fix incorrectly changes to: `import type { obj } from './utils'`
import { obj } from './utils'

type _TypeofObj = typeof obj
</script>

Case 2: Component import

No error (expected behavior)

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
</script>

False positive when using typeof

<template>
  <div>
    <ChildComponent ref="childComponentRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// oxlint error:
// "All imports in the declaration are only used as types. Use `import type`."
// Auto-fix incorrectly changes to:
// `import type ChildComponent from './ChildComponent.vue'`
import ChildComponent from './ChildComponent.vue'

const childComponentRef = ref<InstanceType<typeof ChildComponent>>()
</script>

Expected Behavior

oxlint should recognize that the imported variables/components are used in the <template> section and therefore should not be treated as type-only imports, even if they are also used with typeof in the script.


Actual Behavior

  • oxlint ignores template usage
  • Treats imports as type-only when typeof is used
  • Triggers consistent-type-imports error
  • Applies incorrect auto-fix (import type)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Fields

    Priority

    None yet

    Effort

    None yet

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions