HELP: Project broke overnight without doing any changes

v0
,
1

https://v0.app/chat/form-with-valibot-pdY8uVQY0BK

Yields error Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

Here’s a repro. In my other project, I get a similar issue. I can run the code locally and works, but for some reason, using shadcn forms breaks. Strangely, this was working about 2 days ago.

I’ve waisted a ton of tokens trying to get it to fix itself.

4

Just downloaded the zip to see what happens locally. Slightly different but related error:

```
app-index.js:33 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of SlotClone.
at Input (webpack-internal:///(app-pages-browser)/./components/ui/input.tsx:13:11)
at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-slot@1.1.1_@types+react@18.3.24_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.mjs:34:11)
```

1 Like
5

I can confirm this issue, it happens when <FormControl> wraps an <Input> directly. It looks like the Slot in the FormControl results in children passed to the Input

I’ve passed this on to the team to take a look. In the meantime you can wrap the input in any element to protect the input

<FormControl>
  <div>
    <Input {...field} />
  </div>
</FormControl>
7

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.