DEV Community

Kazutora Hattori
Kazutora Hattori

Posted on

How I fixed the Chakra UI List component not found error by updating to the latest version.

#chakraui #webdev #programming

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";
Enter fullscreen mode Exit fullscreen mode

The error message I received was:

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

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
Enter fullscreen mode Exit fullscreen mode

Then, restart the development server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)