React+Tailwind项目中Shadcn组件引入失败（模块未找到）

1. 先确认组件文件是否存在 #

检查项目中是否存在 src/components/ui/button.js 文件。如果没有，说明Shadcn CLI安装时未生成该组件，重新运行安装命令：

npx shadcn-ui@latest add button

安装时注意CLI的路径提问，确保组件存储目录选择为 components/ui（基于src根目录）。

2. 修正jsconfig.json配置 #

确保你的jsconfig.json配置正确，baseUrl 和 paths 要匹配项目结构：

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

• baseUrl 设为 src，表示所有别名路径基于src目录
• @/* 映射到src下的所有文件，这样 @/components/ui/button 就对应 src/components/ui/button.js

3. 处理Create React App的别名限制 #

如果你的项目用Create React App（CRA）初始化，CRA默认不支持自定义路径别名，需要用craco覆盖配置：

1. 安装craco依赖：

npm install @craco/craco --save-dev

2. 根目录创建craco.config.js：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/')
    }
  }
};

3. 修改package.json的scripts命令：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

修改后必须重启开发服务器。

4. 对齐components.json的别名配置 #

打开项目根目录的components.json，确保aliases字段和jsconfig的别名一致：

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": false,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/index.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

5. 测试相对路径验证问题 #

如果以上配置都没解决，先尝试用相对路径引入Button：

import Button from '../../components/ui/button'

• 如果相对路径能成功引入，说明是路径别名的配置问题，回头检查jsconfig和craco的配置
• 如果相对路径也报错，说明组件文件确实不存在，重新运行Shadcn的组件安装命令

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