vuejs/eslint-plugin-vue

vue/require-explicit-slots does not work when type reference is imported

Closed this issue · 4 comments

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.57
  • eslint-plugin-vue version: 10.0.0
  • Vue version: ^3.5
  • Node version: 18.20
  • Operating System: Ubuntu 24.10

Please show your full configuration:

// baseConfig
{
    root: true,
    env: {
        browser: true,
        es6: true,
        jest: true,
        node: true
    },
    extends: ["eslint:recommended", "plugin:vue/recommended", "@vue/prettier"],
    parser: "vue-eslint-parser",
    parserOptions: {
        parser: "@typescript-eslint/parser",
        ecmaVersion: 2020,
        sourceType: "module",
        ecmaFeatures: {
            jsx: true
        }
    },
    ignorePatterns: ["**/target/", "**/generated/"],
    overrides: [
        {
            files: ["**/*.ts", "**/*.tsx"],
            extends: [
                "eslint:recommended",
                "plugin:@typescript-eslint/eslint-recommended",
                "plugin:@typescript-eslint/recommended",
                "plugin:vue/recommended",
                "@vue/prettier"
            ]
        }
    ],
    rules: {
        "@typescript-eslint/no-unused-vars": ["warn"],
        "vue/multi-word-component-names": [
            "error",
            {
                ignores: []
            }
        ],
        "vue/require-explicit-slots": ["warn"]
    }
}

What did you do?

<script setup lang="ts">
import type {  BmButtonSlots } from "./button.type";
// ...
const slots = defineSlots<BmButtonSlots>();
</script>

<template>
    <BmButton>
        <slot v-else name="icon">
            <BmIcon v-if="icon" :icon="icon" />
        </slot>
        <span class="label-wrapper" :class="{ 'sr-only': isIconVariant }">
            <slot>
                {{ label }}
            </slot>
        </span>
    </BmButton>
</template>

What did you expect to happen?
should not warn about require-explicit-slot

What actually happened?

Slots must be explicitly defined.eslint[vue/require-explicit-slots](https://eslint.vuejs.org/rules/require-explicit-slots.html)

It works on my end #2786.
Could you please provide a Stackblitz or GitHub repo so we can debug this issue?

It works on my end #2786.
Could you please provide a Stackblitz or GitHub repo so we can debug this issue?

I 'll try to reproduce on a stackblitz.
That could lead me towards what I am doing wrong here. Since it works on your side , it might well be an issue on my project config

It works on my end #2786. Could you please provide a Stackblitz or GitHub repo so we can debug this issue?

here's a Stackblitz with that issue :
https://stackblitz.com/edit/vitejs-vite-wxnegeku?file=src%2Fcomponents%2FHelloWorld.vue

in COmponent HelloWOrl you have a slot with a DefineSlot() where MySlot is an interface imported from a file located at src/

When running npx eslint ./src, we have a warning on defineSlot

You'll need to configure the following parameters:

"parserOptions": {
  // ...
  "project": ["./tsconfig.app.json", "./tsconfig.node.json"],
  "extraFileExtensions": [".vue"]
}