Chakra UI の List コンポーネントが見つからないエラーを最新版へのアップデートで解決した話

はじめに　

React（Vite + TypeScript）でアプリを開発中、UI ライブラリとして Chakra UI を導入しました。
基本的なコンポーネント（Box, Heading, Text など）は動いたのですが、以下のように List や ListItem を import したところでエラーになりました。

import { Box, Heading, Text, List, ListItem } from "@chakra-ui/react";

発生したエラーメッセージは以下：

Attempted import error: 'List' is not exported from '@chakra-ui/react'

どうやら自分のプロジェクトに入っている @chakra-ui/react のバージョンが古く、List コンポーネントがまだ含まれていなかったのが原因でした。

解決方法

最新版にアップデートすることで解決しました。

npm install @chakra-ui/react@latest @emotion/react @emotion/styled framer-motion

その後、開発サーバーを再起動：

npm run dev

結果

• 画面が正常に表示されるようになった

• List, ListItem を含めた Chakra UI コンポーネントがすべて利用可能に

• 型エラーも消えて、VSCode 上でも赤線が出なくなった