Shadcn UI能否用于Vite+React JavaScript环境？安装报错求助

核心原因分析 #

EISDIR错误本质是代码或配置尝试读取目录而非文件导致的，结合你的场景，大概率和shadcn组件的路径配置、项目文件引用逻辑有关。

分步排查与修复 #

• 检查组件引入语句
  遍历项目中所有引入shadcn组件的代码，确保是指向具体文件而非目录。比如正确写法：

  import { Button } from "@/components/ui/button"
  

  避免错误的目录引用：import { Button } from "@/components/ui"

• 验证components.json配置
  打开项目根目录的components.json，确认componentDir字段指向正确的组件目录，示例配置：

  {
    "componentDir": "./src/components/ui",
    "tailwind": {
      "config": "tailwind.config.ts",
      "css": "src/index.css"
    },
    "rsc": false,
    "tsx": true
  }
  

  确保该目录存在，且每个shadcn组件都有对应的tsx文件。

• 对齐Vite与TS的路径别名
  检查vite.config.ts和tsconfig.json中的别名配置是否一致：
  vite.config.ts示例：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  import path from 'path'
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
  })
  

  tsconfig.json对应配置：

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

• 清理依赖后重装
  执行以下命令重置依赖环境：

  rm -rf node_modules package-lock.json
  npm install
  npm run dev
  

如果以上步骤无效，建议检查项目中是否有自定义脚本或第三方插件存在文件读取逻辑错误，比如误将目录当作文件处理。

内容的提问来源于stack exchange，提问作者Sulejman