[bug]: Invalid configuration found in C:\Users\UserName\ProjectFolder/components.json.

[JoeCYPHER]

Describe the bug

The error message indicates that there is an issue with the components.json. I have however crosschecked the content of the components.json file and couldn't identify the source of the issue, as the schema is rightly put as well.

PLEASE ANY SOLUTION WILL BE MUCH APPRECIATED.

Affected component/components

Button

How to reproduce

1. Set up the environment for a Next.js project
2. Run the init command to create a new Next.js project or to setup an existing one: npx shadcn@latest init
3. Start adding components to your project (WHERE ERROR PERSISTS): npx shadcn@latest add button

Codesandbox/StackBlitz link

No response

Logs

Invald configuration found in C:\Users\UserName\ProjectName/components.json

System Info

Windows 10 Pro
VS Code (IDE)
Terminal = both cmd and PowerShell

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[JoeCYPHER]

Step-by-Step Solution (What I Did to Get the Problem Solved)

1. Uninstalled shadcn-ui:

   • I started by uninstalling the shadcn-ui package to ensure a clean slate.

   PS C:\Users\UserName\ProjectFolder> npm uninstall shadcn-ui

   • This removed 73 packages and audited 375 packages in 20 seconds.

2. Reinstalled shadcn-ui:

   • Next, I reinstalled the shadcn-ui package.

   PS C:\Users\UserName\ProjectFolder> npm install shadcn-ui

   • This added 121 packages and audited 496 packages in 59 seconds. However, it identified 2 high severity vulnerabilities.

3. Run npm audit fix:

   • I ran npm audit fix to attempt to fix the vulnerabilities.

   PS C:\Users\UserName\ProjectFolder> npm audit fix

   • This changed 1 package and audited 496 packages in 4 seconds. It identified that a fix was available via npm audit fix --force, which would install [email protected], a breaking change.

4. Run npm audit fix --force:

   • To address all issues, including breaking changes, I ran npm audit fix --force.

   PS C:\Users\UserName\ProjectFolder> npm audit fix --force

   • This updated shadcn-ui to version 0.2.3, removed 48 packages, changed 1 package, and audited 448 packages in 4 seconds. It found 0 vulnerabilities.

5. Verified Installed Version:

   • I verified the installed version of shadcn-ui to ensure it was updated correctly.

   PS C:\Users\UserName\ProjectFolder> npm list shadcn-ui

   • The output confirmed that [email protected] was installed.

6. Started the Application:

   • I started the Next.js application to ensure it ran correctly after the updates.

   PS C:\Users\UserName\ProjectFolder> npm run dev

   • The application started successfully, and I verified that it was running on http://localhost:3000.

7. Added the Button Component:

   • Finally, I added the button component using the shadcn-ui CLI.

   PS C:\Users\UserName\ProjectFolder> npx shadcn@latest add button

   • The command checked the registry, installed dependencies, and created the button.tsx file in the components\ui directory.

Conclusion
By following these steps, I successfully resolved the issues related to the shadcn-ui package and added the button component to my Next.js project. The process involved uninstalling and reinstalling the package, fixing vulnerabilities, verifying the installed version, starting the application, and finally adding the desired component. This comprehensive approach ensured that my project was up-to-date, secure, and functional.