[v0] Chart UI component file not created by "npx v0 add"

(edited)

I'm trying to import a generated component using the npx v0 add command. I've done this successfully in the past and it typically creates the missing UI files automatically, but it's not doing so for the chart. I haven't found anywhere else I'd be able to access this code. This is the import:

import { ChartTooltipContent, ChartTooltip, ChartContainer } from "@/components/ui/chart"

Can somebody please share the code of this file? Thanks in advance.

Vercel Staff

Hey . Can you give it another try and let me know if it's working now, or what error message you see if it's still not working?

I've tried it several times, it hasn't worked an there is no error message. This is the v0 UI component I'm trying to import: https://v0.dev/t/gX7ZqG1CGGp

v0.dev

generate a chart component. it should be reusable, but in this specific scenario i want to render a $ amount for days of the week | A shadcn/ui and v0 generation

This is a v0.app and shadcn/ui generation for the prompt: generate a chart component. it should be reusable, but in this specific scenario i want to render a $ amount for days of the week

As explained in the post, the "@/components/ui/chart" simply isn't being created automatically by the npx v0 add command.

Output from running the command:

√ What should we name the component? ... UserCollectionValueChart
✔ Done.

The component has been added to your project.
To install theme colors and fonts, visit https://v0.dev/t/gX7ZqG1CGGp and follow the instructions under the Code tab.

No errors indicated. I'd appreciate if this could be forwarded to somebody from the v0 team. It may be a bug.

Vercel Staff

It does seem like a possible bug. I needed to get more info to create a bug report for the v0 team so they would know what to investigate.

Thanks for sharing the component. I was able to add it to my test project and can confirm the component is being added, but there is a missing dependency. When running the project I see the error Module not found: Can't resolve 'recharts'. Is that the same problem you see?

to address that issue, run npm install recharts. It is one of the dependencies used by v0's charts. However, can you confirm the fact that the @/components/ui/chart file was created? If so, that is all that I need on my end to resolve my problem, so I'd appreciate the source code of that file.

e: Also, potential improvement for v0. npx v0 add should automatically install required dependencies that don't exist in the project (such as recharts in this case) to avoid the problem you just faced.

Vercel Staff

I've shared your issue with the v0 team. But you can resolve the error by adding the missing shadcn/ui chart file with npx shadcn-ui@latest add chart

Ah I see, that solved my problem. Still not sure why the component wasn't created automatically as the shadcn ui components usually are when using npx v0 add, but, but I'm glad to hear you've shared the issue with the team. Thanks for the help.

Vercel Staff

The team found the bug and pushed a fix so no one else should run into the issue. Thanks for reporting it!

This topic is closed. It no longer accepts new replies.

√ What should we name the component? ... UserCollectionValueChart ✔ Done. The component has been added to your project. To install theme colors and fonts, visit https://v0.dev/t/gX7ZqG1CGGp and follow the instructions under the Code tab.