Компонент Select отображается некорректно

Вопрос или проблема

//UseSelectTest.vue
<script setup lang="ts">
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

import { Button } from '@/components/ui/button';
</script>

<template>
  <Select>
    <SelectTrigger>
      <SelectValue placeholder="Выберите фрукт" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectLabel>Фрукты</SelectLabel>
        <SelectItem value="apple">
          Яблоко
        </SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>

  <Button>Эта кнопка красивая</Button>
</template>

vue-mc-gaps.vue:1 [Vue warn]: Не удалось разрешить компонент: SelectValue
Если это родной пользовательский элемент, убедитесь, что он исключен из разрешения компонентов через compilerOptions.isCustomElement. 

plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag : string) => ['Select', 'FormControl', 'SelectTrigger', 'SelectContent', 'SelectGroup', 'SelectItem','SelectLabel','SelectTrigger','SelectValue'].includes(tag), //
        }
      }
    })
  ]

//vite.config.ts

import path from 'node:path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'
export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwind(), autoprefixer()],
    },
  },
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag : string) => ['Select', 'FormControl', 'SelectTrigger', 'SelectContent', 'SelectGroup', 'SelectItem','SelectLabel','SelectTrigger','SelectValue'].includes(tag), //
        }
      }
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

//tsconfig.app.json
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "allowImportingTsExtensions": true,
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Ответ или решение

Проблема, с которой вы столкнулись, связана с тем, что компонент Select и его дочерние элементы, такие как SelectValue, не могут быть корректно отрисованы. Есть несколько причин, по которым это может происходить. Давайте рассмотрим наиболее вероятные причины и пути их решения.

1. Проверка импорта

Убедитесь, что все компоненты Select, включая SelectValue и другие, импортируются правильно. В вашем коде вы импортируете следующие компоненты:

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

Проверьте, что путь @/components/ui/select действительно указывает на файл, где определены эти компоненты. Возможно, у вас есть опечатка или файл не существует.

2. Проверка установки зависимостей

Убедитесь, что все необходимые зависимости установлены. Если вы используете Vite, выполните следующую команду для установки всех зависимостей:

npm install

Также можно проверить, есть ли дополнительные зависимости, которые могут быть необходимы для Shadcn/vue.

3. Настройка Vite

Ваши настройки Vite выглядят в целом правильно, однако убедитесь, что все элементы, входящие в список isCustomElement, корректны и соответствуют тому, что ожидается от библиотеки.

Ваш код выглядит следующим образом:

plugins: [
  vue({
    template: {
      compilerOptions: {
        isCustomElement: (tag: string) => ['Select', 'FormControl', 'SelectTrigger', 'SelectContent', 'SelectGroup', 'SelectItem', 'SelectLabel', 'SelectValue'].includes(tag),
      }
    }
  })
]

Убедитесь, что все названия компонентов совпадают с теми, что у вас в библиотеке (например, FormControl), и что они действительно нужны.

4. Стиль и отображение

Если у вас не возникает никаких ошибок, но компонент по-прежнему не отображается, возможно, проблема связана со стилями. Проверьте, применяются ли стили к вашему компоненту Select. Если вы используете Tailwind CSS, убедитесь, что классы, необходимые для функциональности вашего Select-компонента, правильно применяются.

Если компонент не отображается должным образом без ошибок в консоли, попробуйте добавить временные стили (например, border или bg-gray), чтобы проверить, отрисовывается ли он вообще.

5. Использование компонентов

Попробуйте упростить ваш компонент UseSelectTest.vue. Например, уберите дополнительные элементы и оставьте только Select, чтобы изолировать проблему:

<template>
  <Select>
    <SelectTrigger>
      <SelectValue placeholder="Select a fruit" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectLabel>Fruits</SelectLabel>
        <SelectItem value="apple">Apple</SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
</template>

Запустите проект, чтобы увидеть, работает ли Select в упрощенном виде.

6. Проверка документации

Поскольку вы используете Shadcn/vue, рекомендую ещё раз тщательно просмотреть документацию к библиотеке. Возможно, есть дополнительные шаги, которые вы пропустили при установке или настройке компонентов.

Заключение

Если, после выполнения всех вышеуказанных шагов, проблема не решается, вам может понадобиться создать минимальный пример кода и поделиться им на ресурсах (например, GitHub), где другие разработчики смогут посмотреть и помочь вам с проблемой.

Надеюсь, это поможет вам решить вашу проблему. Если у вас возникнут дополнительные вопросы, не стесняйтесь спрашивать!