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.
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.3.1/node_modules/@radix-ui/react-slot/dist/index.mjs:34:11)
```
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
