React x shadcn/ui実装

はじめに

Claudeを普段利用して開発をサポートしてもらっているが、適当に作成しているとshadcn/uiを妙に推してくることがある。

以前導入に失敗したものの、簡易的にコピペしつつ利用したところ結構使い勝手が良かったので改めて導入を頑張りたいと思う。

最近Reactで静的ホストを利用するのにはまっているのでNextjsではなくReactに導入する方法を探っていきたいと思う。

基本的な手順：

最後インストールする場所がずれる問題があったので、インストール部分だけ修正しようと思う。

はまった場所

components.jsonをいったん削除する

pnpm dlx shadcn@latest init

これを実行すると、エイリアスのあたりでエラーになると同じ設定ミスをしている

修正1：tsconfig.jsonの修正

tsconfig.jsonにパスの設定を行わないと認識しない問題がある
nodeやappに記載していたため、認識されなかった。

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

再度開発サーバを立ち上げなおしてエラーが出なければ問題なし

修正2：エイリアスの修正
純粋にReactのエイリアスエラーなので以下のサイトを参考にするとよい

以前は、2個目で行けたがなぜか今回うまくいかなかったためもしかしたら設定関係で依存があるかも、、？

vsのTSがパスを認識しない問題があったが、そちらはappのほうを参照するようなので重複する内容であるが、そちらにも記載する必要がある。

探すのが若干面倒臭いので今回は1個目でやりました。