鼎鼎大名的 shadcn/ui，新出的 sidebar 組件卻報錯？

勇哥最近在做一個 AI 對話項目，前端選型用了 shadcn/ui，shadcn/ui 開源且設計精美，粘貼複製到項目中即可使用。最近又新出了 Sidebar 組件，可以快速構建出類似豆包等 AI 平台 AI 對話效果。

shadcn-0

開幹，一頓操作猛於虎，直接下載官方預設的 block 到應用中：

npx shadcn@latest add sidebar-01

開 dev 模式預覽效果，PC 端效果完美，就差對接後端接口了。切換到 moble 模式，點擊切換側邊欄，鮮紅的 Console Error 映入眼簾：

DialogContent requires a DialogTitle for the component to be accessible for screen reader users.If you want to hide the DialogTitle, you can wrap it with our
VisuallyHidden component. For more information, see https://radix-ui.com/primitives/docs/components/dialog

先說解決辦法：

找到 Sidebar 組件源代碼：components/ui/sidebar.tsx
找到 Sidebar 定義的 isMobile 判斷部分

在 <SheetContent /> 組件中添加 <SheetHeader/>，具體如下：

if (isMobile) {
  return (
    <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
      <SheetContent
        {/* 此處代碼顯示省略... */}
      >
        {/* 添加以下代碼 */}
        <SheetHeader className="sr-only">
          <SheetTitle>Sidebar</SheetTitle>
          <SheetDescription></SheetDescription>
        </SheetHeader>
        {/* 添加代碼結束 */}
        <div className="flex h-full w-full flex-col">{children}</div>
      </SheetContent>
    </Sheet>
  )
 }

再說產生的原因：

shadcn/ui 的 Sidebar 組件在 mobile 模式下會用到 Sheet 組件
shadcn/ui 的 Sheet 組件依賴 radix-ui 的 dialog 組件
radix-ui 的 dialog 組件要求 DialogContent 必需

套娃了屬於是。

文中提到的資源如下：

shadcn/ui 項目官網：https://ui.shadcn.com/
代碼倉庫：https://github.com/shadcn-ui/ui
shadcn/ui Sidebar 組件使用：
- https://ui.shadcn.com/docs/components/sidebar
- https://ui.shadcn.com/blocks