Resolving "Error: Cannot Find Module '@babel/types'" During Shadcn-UI Installation

Introduction

Shadcn-ui is a collection of open-source reusable components designed for Next.js, Astro, Vite, etc. It features a variety of beautifully designed components that can be easily integrated into your applications. Thanks to its reusability, it's well-suited for production. The library is customizable to your preferences and accessible, ensuring versatility for users.

To incorporate Shadcn-ui components into our application, we can either install them through the CLI terminal or opt for manual installation. Utilizing the CLI terminal is easy and straightforward, making the installation process simpler compared to manual installation.

While attempting an installation using the CLI terminal, I encountered several errors. In this article, I'll guide you through troubleshooting and resolving those errors, should you encounter them as well.

How to Install Using the CLI Terminal

1. Create a project

Regardless of the application you're working on, begin by creating the project. Since we're using Next.js in this example, execute the following command:

npx create-next-app@latest my app

2. Run the CLI init command

Once the app has been successfully created, we'll run the shadcn-ui init command to initiate the setup process for your project.

npx shadcn-ui@latest init

After running the command, I get this error:

To address this issue, we'll replace the latest keyword in the init command with the specific version we intend to install. Since the latest version at the time of installation is 0.6.0, execute the following command:

npx shadcn-ui@0.6.0 init

3. Configure the component.json during installation

Upon executing the command, you'll be presented with various installation options. Select those that align with your project's requirements, and the installation process will commence successfully.

4. Add a component

With the installation and configuration successfully completed, we're now ready to incorporate components of our choosing, such as Card Components, Button Components, and more.

For the purposes of this article, we'll demonstrate the addition of a Button Component. To add a Button Component to your component folder, execute the following command:

npx shadcn-ui@0.6.0 add button

This command will integrate the Button Component within a dedicated UI folder within your Component folder, enabling its utilization within your project.

To utilize this component within your project, simply import the Button Component from the Components/ui folder, and it will seamlessly display within your web page.

import { Button } from "@/components/ui/button"

export default function Page() {
  return (
    <div className=”flex flex-col gap-4 items-center justify-center”>
      <Button>Click me</Button>
    </div>
  )
}

On our web page, we have:

And that's it 👍🏾

Conclusion

For comprehensive guidance on leveraging other components, kindly refer to the official Shadcn-UI documentation.

With these steps, you're now equipped to effectively troubleshoot and resolve potential installation challenges that may arise with Shadcn-ui in your projects.

I sincerely hope this proves helpful.