Shadcn+React+TypeScript项目中@/components/ui/accordion模块找不到的修复

在已安装TypeScript的React项目中使用Shadcn，通过Shadcn CLI安装组件时选择仅获取JSX组件（TypeScript选项设为No），出现以下错误：

module not found: Error: Can't resolve '@/components/ui/accordion' in '/home/vinayak/Desktop/sadcn/src'

当前tsconfig.json配置：

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

项目目录结构：

- .gitignore
- README.md
- app
  - globals.css
- components
  - ui
    - accordion.jsx
- components.json
- lib
  - utils.js
- package-lock.json
- package.json
- public
  - favicon.ico
  - index.html
  - logo192.png
  - logo512.png
  - manifest.json
  - robots.txt
- src
  - App.css
  - App.js
  - App.test.js
  - index.css
  - index.js
  - logo.svg
  - reportWebVitals.js
  - setupTests.js
- tailwind.config.js
- tsconfig.json

1. 修正tsconfig路径配置 #

你的paths配置存在语法问题，@/无法正确匹配子路径，需要改为@/*来映射根目录下的所有子文件夹：

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

2. 确认导入语句正确性 #

检查src/App.js中的导入代码，确保路径写法正确，不需要添加.jsx后缀（打包工具会自动解析）：

import { Accordion } from '@/components/ui/accordion';

3. 校验components.json配置 #

打开项目根目录的components.json，确认accordion组件的路径指向正确的文件位置，若有误手动修正：

{
  "components": {
    "accordion": "./components/ui/accordion.jsx"
  }
}

4. 重启开发服务器 #

修改配置文件后，必须重启React开发服务器，让新的路径映射配置生效，否则修改不会被加载。

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