无法使用Shadcn组件

Question

我创建了一个基本的顺风+反应应用程序。我也尝试使用 Shadcn，但在尝试使用按钮组件时收到此错误：\n ERROR in ./src/pages/homepage/index.js 5:0-48 Module not found: Error: Can\'t resolve \'@/components/ui/button\' in ...

\n

我有一个 jsconfig.json 文件而不是 tsconfig 因为我没有使用 typescript

\n

我该如何解决？

\n

文件结构

\n

应用程序.js

\n

import { BrowserRouter, Routes, Route } from "react-router-dom";\nimport { Index } from \'./pages/homepage/index\';\nfunction App() {\n    return (\n        <BrowserRouter>\n            <Routes>\n                {/* public routes */}\n                <Route path=\'/\' element={ <Index /> } />\n            </Routes>\n        </BrowserRouter>\n    );\n}\n\nexport default App;\n

\n

索引.js

\n

import React from "react"\nimport { Button } from "@/components/ui/button"\n\nexport function Index() {\n    return (\n        <>\n            <h1 className="text-3xl font-bold underline text-cyan-600">\n                Hello world!\n            </h1>\n            <Button variant="outline">Button</Button>\n        </>\n    )\n}\n

\n

jsconfig.json - 来自示例 next js 应用程序：\n https://github.com/shadcn/next-template-jsx/blob/main/jsconfig.json

\n

{\n  "compilerOptions": {\n    "paths": {\n      "@/*": ["./*"]\n    }\n  }\n}\n

\n

也尝试过这个：

\n

{\n    "compilerOptions": {\n      "paths": {\n        "@/*": ["./src/*"]\n      }\n    }\n  }\n

\n

组件.json

\n

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

\n

tailwind.config.js

\n

/** @type {import(\'tailwindcss\').Config} */\nmodule.exports = {\n  darkMode: ["class"],\n  content: [\n    \'./pages/**/*.{js,jsx}\',\n    \'./components/**/*.{js,jsx}\',\n    \'./app/**/*.{js,jsx}\',\n    \'./src/**/*.{js,jsx}\',\n    ],\n  theme: {\n    container: {\n      center: true,\n      padding: "2rem",\n      screens: {\n        "2xl": "1400px",\n      },\n    },\n    extend: {\n      colors: {\n        border: "hsl(var(--border))",\n        input: "hsl(var(--input))",\n        ring: "hsl(var(--ring))",\n        background: "hsl(var(--background))",\n        foreground: "hsl(var(--foreground))",\n        primary: {\n          DEFAULT: "hsl(var(--primary))",\n          foreground: "hsl(var(--primary-foreground))",\n        },\n        secondary: {\n          DEFAULT: "hsl(var(--secondary))",\n          foreground: "hsl(var(--secondary-foreground))",\n        },\n        destructive: {\n          DEFAULT: "hsl(var(--destructive))",\n          foreground: "hsl(var(--destructive-foreground))",\n        },\n        muted: {\n          DEFAULT: "hsl(var(--muted))",\n          foreground: "hsl(var(--muted-foreground))",\n        },\n        accent: {\n          DEFAULT: "hsl(var(--accent))",\n          foreground: "hsl(var(--accent-foreground))",\n        },\n        popover: {\n          DEFAULT: "hsl(var(--popover))",\n          foreground: "hsl(var(--popover-foreground))",\n        },\n        card: {\n          DEFAULT: "hsl(var(--card))",\n          foreground: "hsl(var(--card-foreground))",\n        },\n      },\n      borderRadius: {\n        lg: "var(--radius)",\n        md: "calc(var(--radius) - 2px)",\n        sm: "calc(var(--radius) - 4px)",\n      },\n      keyframes: {\n        "accordion-down": {\n          from: { height: 0 },\n          to: { height: "var(--radix-accordion-content-height)" },\n        },\n        "accordion-up": {\n          from: { height: "var(--radix-accordion-content-height)" },\n          to: { height: 0 },\n        },\n      },\n      animation: {\n        "accordion-down": "accordion-down 0.2s ease-out",\n        "accordion-up": "accordion-up 0.2s ease-out",\n      },\n    },\n  },\n  plugins: [require("tailwindcss-animate")],\n}\n

\n

不知道该怎么做，我很确定我正确地遵循了所有步骤 - 我使用新的 CLI 进行安装。它看起来与我见过的其他存储库相似

\n

一切都是最新版本

\n

编辑：\n这些是 CLI 问题

\n

Would you like to use TypeScript (recommended)? no/yes\nWhich style would you like to use? \xe2\x80\xba Default\nWhich color would you like to use as base color? \xe2\x80\xba Slate\nWhere is your global CSS file? \xe2\x80\xba \xe2\x80\xba app/globals.css\nDo you want to use CSS variables for colors? \xe2\x80\xba no / yes\nWhere is your tailwind.config.js located? \xe2\x80\xba tailwind.config.js\nConfigure the import alias for components: \xe2\x80\xba @/components\nConfigure the import alias for utils: \xe2\x80\xba @/lib/utils\nAre you using React Server Components? \xe2\x80\xba no / yes\n

\n

和我的答案：

\n

no\ndefault\nslate\nsrc/index.css\nyes\ntailwind.config.js\n@/components\n@/lib/utils\nno\n

\n

Answer 1

对于（reactjs + javascript + tailwindcss）：

\n

第一： npm create vite@latest

\n

第二： npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

\n

第三：在根文件夹中手动创建 jsconfig.json。

\n

第四：在 jsconfig.json 中添加此行

\n

      {\n        "compilerOptions": {\n          "paths": {\n          "@/*": ["./*"]\n          }\n        }\n      }\n

\n

第五： npx shadcn-ui@latest init

\n

执行时，我选择了所有这些：

\n

Would you like to use TypeScript (recommended)? no\nWhich style would you like to use? \xe2\x80\xba Default\nWhich color would you like to use as base color? \xe2\x80\xba Slate\nWhere is your global CSS file? \xe2\x80\xba src/index.css\nDo you want to use CSS variables for colors? \xe2\x80\xba no\nWhere is your tailwind.config.js located? \xe2\x80\xba tailwind.config.js\nConfigure the import alias for components: \xe2\x80\xba @/components\nConfigure the import alias for utils: \xe2\x80\xba @/lib/utils\nAre you using React Server Components? \xe2\x80\xba no\n

\n

最后，控制台会要求将其保存在Components.json中。按 Y。

\n

里面components.json看起来像这样。（寻找别名）

\n

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

\n

第六：在vite.config.js定义中__dirname。否则，它可能会给你带来问题。

\n

   //because __dirname was showing undefined\n   const __filename = fileURLToPath(import.meta.url);\n   const __dirname = path.dirname(__filename);\n

\n

\n

vite.config.js

\n

\n

    import path from "path"\n    import react from "@vitejs/plugin-react"\n    import { defineConfig } from "vite"\n    import { fileURLToPath } from \'url\';\n\n    // because __dirname was showing undefined\n    const __filename = fileURLToPath(import.meta.url);\n    const __dirname = path.dirname(__filename);\n\n    export default defineConfig({\n      plugins: [react()],\n      resolve: {\n        alias: {\n          "@": path.resolve(__dirname, "./"),\n        },\n      },\n    })\n

\n

第 7 个（可选）：\npath变量也可能导致问题。你可以尝试运行（这样你就可以导入“path”而不会出错）

\n

`npm i -D @types/node`\n

\n

您的文件夹结构的唯一例外是，我的组件和lib文件夹位于根文件夹中（不在 src 内）。

\n

\n

Answer 2

首先，如果你查看他们的文档（https://ui.shadcn.com/docs/installation），只是为了让你知道，建议使用 Typescript，因为他们的组件也是这样编写的。

除此之外，如果您仍然想坚持使用 Javascript，我建议使用第二个 jsconfig，因为您的应用程序的文件/文件夹包含在名为src的文件夹中。

jsconfig.json：

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

此外，当再次检查文档（https://ui.shadcn.com/docs/installation ）时，他们有一个Components.json文件的示例，如下所示：

{
  ...
  "aliases": {
    "utils": "~/lib/utils",
    "components": "~/components"
}

所以也许尝试使用“~”而不是“@”。您也可以尝试例如“~/src/components”。