状況
Chakra UI V3のインストール後、npx @chakra-ui/cli snippet add
を実行しスニペットを追加した。
その後、npm run build
を実行したところ、
error TS2322: Type '{ children: ArkTooltip.RootBaseProps; asChild: true; }' is not assignable to type 'IntrinsicAttributes & TooltipTriggerProps & RefAttributes<HTMLButtonElement>'.
Property 'children' does not exist on type 'IntrinsicAttributes & TooltipTriggerProps & RefAttributes<HTMLButtonElement>'.
30 <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
上記のような型に関するエラーが大量に発生する。
解決策
tsconfig.jsonに"exclude": ["src/components/ui/*"]
を追記しTypeScriptのコンパイル対象から除外することでビルドが通るようになった。
ちなみにtsconfig.jsonではなくtsconfig.app.jsonにexcludeを記述した場合、ビルドが通らなかった。
これは、tsconfig.jsonがTypeScriptがどのようにJavaScriptにコンパイルされるかを決めるグローバルなファイルに対し、tsconfig.app.jsonはアプリケーション固有の設定を含み、tsconfig.jsonを拡張する形で使用されるという違いがあるかららしい。