shadcn/ui - 无法加载 URL

Question

我正在尝试将 shadcn 用于某些样式组件，但在导入其中一个组件时遇到问题。这是我遇到的错误

Failed to load url /src/components/ui/input (resolved id: /src/components/ui/input) in /Users/dchoi/Github/bargain-battle/frontend/src/containers/Game/Game.tsx. Does the file exist?

在我的 React 应用程序的网络选项卡中，我看到它正在向 url 发出请求：

http://127.0.0.1:5173/src/components/ui/input?t=1687730147732

/src/components/ui/input实际上不存在于我的文件结构中。输入组件位于 /@/components/ui/input.tsx。

下面是我的文件结构的图片。如何修复此错误并正确导入 shadcn 组件？

Answer 1

尝试将输入组件的导入语句更改为：

import { Button } from './@/components/ui/button'

如果问题仍然存在，请尝试重新安装和配置您的 shadcn 项目。

在安装和配置项目的过程中，您应该将以下代码添加到tsconfig.json文件的compilerOptions中，以便应用程序可以正确解析任何路径。

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

同时使用以下代码更新 vite.config.ts 文件：

# (helps to import "path" without error)
npm i -D @types/node

import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

现在，当您使用以下命令设置 shadcn-ui 时：

npx shadcn-ui@latest init

并添加任何 ui 组件，例如按钮：

npx shadcn-ui@latest add button

将在以下位置创建可重复使用的按钮组件： src/components/ui/button.tsx.

现在尝试将其导入到您的项目中：

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

这可能会解决您的导入问题。

Answer 2

您可以在input.tsx中更新cn的导入

来自：从“src/@/lib/utils”导入 { cn } 至：从“../../lib/utils”导入 { cn }

我没有按照tsconfig.json和vite.config.ts的说明进行操作，因为它会影响自动导入。