前排问题记录

ts 类型问题

比如这种 src/shadcn/ui/tabs.tsx(6,7): error TS2742: The inferred type of 'Tabs' cannot be named without a reference to '.pnpm/@[email protected]/node_modules/@types/react'. This is likely not portable. A type annotation is necessary

• https://github.com/vercel/turborepo/discussions/9604
• https://github.com/microsoft/TypeScript/issues/42873#issuecomment-1416128545

出现以上问题的原因有以下几点：

• tsconfig.json 配置错误
• package.json 中的类型依赖有问题

本项目基于 shadcn/ui， 原项目是没有这些鬼问题的，因此我们只需要使用原项目的配置即可。

当前项目使用 [email protected]:shadcn-ui/ui.git 在 1bd209a4dbe555eab45a47d03d3fe6c819b5e753 版本上的配置

下面是显著的影响点：

• @types/react 使用 18.x
• tsconfig.json 使用 strict:true

组织结构

/src
    /base
        /dnd-kit
    /hooks
    /lib
        /index.ts
        /utils.ts
    /public
        /styles
            /global.shadcn.css          # snapshot https://web.archive.org/web/20241012082354/https://ui.shadcn.com/docs/installation/manual
    /shadcn
        /lib
        /providers
        /registry
        /ui
        /index.ts

安装 shadcn 组件

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/public/styles/global.shadcn.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/shadcn",   // ui 文件所在的目录
    "utils": "@/lib/utils",
    "ui": "@/shadcn/ui"
  }
}

安装组件

#pnpm dlx [email protected] add
pnpm dlx [email protected] add \
    accordion \
    alert \
    alert-dialog \
    aspect-ratio \
    avatar \
    badge \
    breadcrumb \
    button \
    calendar \
    card \
    carousel \
    chart \
    checkbox \
    collapsible \
    command \
    context-menu \
    dialog \
    drawer \
    dropdown-menu \
    form \
    hover-card \
    input \
    input-otp \
    label \
    menubar \
    navigation-menu \
    pagination \
    popover \
    progress \
    radio-group \
    resizable \
    scroll-area \
    select \
    separator \
    sheet \
    sidebar \
    skeleton \
    slider \
    sonner \
    switch \
    table \
    tabs \
    textarea \
    toast \
    toggle \
    toggle-group \
    tooltip

调整 ui 中对 cn 的导入路径

@/lib/utils 替换为 ../../lib/utils

添加 shadcn 官方 github 中 apps/www/components 下面一些有用的组件到 src/shadcn/ 目录下， 注意需要调整这些组件的引用路径到相对路径，这样构建友好、开发直接导入也不会出错。