fix(Form): fix valibot imports

[romhml]

Fixes import errors from valibot in the Form component by importing safeParseAsync dynamically.

ERROR  Failed to resolve import "valibot" from "../../node_modules/.pnpm/@nuxt+ui@2.8.0_ts-node@10.9.1_vue@3.3.4_webpack@5.88.2/node_modules/@nuxt/ui/dist/runtime/components/forms/Form.vue". Does the file exist?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 7, 2023 2:33pm

[benjamincanac]

Thanks for the fix! Got a bit overwhelmed with the release and the rebranding yesterday, I forgot to try this myself 😅

[ZainW]

im still having a similar issue on the edge release which includes this commit

[ZainW]

because of this issue there are no working versions of nuxt/ui right now, old package (nuxtlabs) cannot be found and the only version published under the nuxt/ui package name is broken, same with edge.

will install valibot in the meantime as a workaround

[benjamincanac]

@ZainW Would you mind sharing a reproduction on StackBlitz of your code and the edge version?

[romhml]

Yeah I'm also experiencing the issue on the latest edge version... I thought that dynamic imports would do the trick but I must have missed something.

I'll look into it.

[benjamincanac]

@ZainW Also, what do you mean old package cannot be found? We deprecated @nuxthq/ui but its still available on NPM: https://www.npmjs.com/package/@nuxthq/ui

[madebyfabian]

This is... not good 😄 experiencing the same. Here is a reproduction with the latest edge installed:
https://stackblitz.com/edit/nuxt-ui-rz5q3s?file=app.vue,package.json

[onemid]

Maybe you can install the valibot manually to workaround.
I solved this problem by npm install valibot

[jduartea]

Hey @romhml, I managed to make this work without importing safeParseAsync. Basically using schema._parse(state) instead of safeParseAsync(schema, state)

[romhml]

@jduartea that could do the trick, looks like the only thing safeParseAsync does is call _parse and throw if there's any issue (https://github.com/fabian-hiller/valibot/blob/98ef1ccd4dd3726aa85076c2f0bcb912765ad9c0/library/src/methods/parse/parseAsync.ts#L18), but since the function is private there's no guarantee that it'll stay that way.

My solution would be to rollback and provide an example to implement it into your own component. #639

@benjamincanac what do you think?

[romhml]

Here is an example with a custom component: https://stackblitz.com/edit/nuxt-ui-3ct9hb?file=components%2FBaseForm.vue

[benjamincanac]

@romhml Are you sure merging #640 is not enough? We can still find another solution if valibot gets an update.

[romhml]

@benjamincanac It work. That's your call, I'd avoid relying on private functions if you ask me, but it should be manageable in this case.

[benjamincanac]

I agree with you, but in this case all the parseAsync method is doing is call the schema._parse.

Also, I don't fell confortable reverting this feature as people started using it already. It's on me for merging the PR too fast and introducing this in 2.8.0 release.

[Zisan-uzum]

Maybe you can install the valibot manually to workaround. I solved this problem by npm install valibot

I really appreciate it solved