Introduction
While developing an app with React (Vite + TypeScript), I introduced Chakra UI as my UI library.
Basic components (Box, Heading, Text, etc.) worked, but I encountered an error when importing List and ListItem, as shown below.
import { Box, Heading, Text, List, ListItem } from "@chakra-ui/react";
The error message I received was:
Attempted import error: 'List' is not exported from '@chakra-ui/react'
Apparently, the version of @chakra-ui/react included in my project was outdated, and the List component was not yet included.
Solution
Updating to the latest version resolved the issue.
npm install @chakra-ui/react@latest @emotion/react @emotion/styled framer-motion
Then, restart the development server:
npm run dev
Results
-
The screen now displays correctly.
-
All Chakra UI components, including List and ListItem, are now available.
-
Type errors have disappeared, and red lines no longer appear in VSCode.
