useForm not working after build when using shadcn components from a shared package in monorepo

[olemarius]

What happened?

Monorepo structure (simplified)

apps
 - admin
packages
 - ui

It seems that useForm and Field, which is exported from ui package gets out of sync after build.

Here's the demo after build:

Here's the demo running in dev:

Here's the demo after build, with modifications illustrated below:

Modifications

When applying the modifications to apps/admin/src/App.vue as illustrated below

- import { useForm } from 'vee-validate'; 
import { toTypedSchema } from '@vee-validate/zod';
import * as z from 'zod';

import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { 
FormControl, 
FormDescription, 
FormField, 
FormItem, 
FormLabel, 
FormMessage,
+ useForm
} from '@/components/ui/form';

Repo for reproduction with instructions can be found here https://github.com/olemarius/vee-validate-repro

Reproduction steps

https://github.com/olemarius/vee-validate-repro

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• [X] Firefox
• [X] Chrome
• [X] Safari
• [X] Microsoft Edge

Relevant log output

No response

Demo link

https://github.com/olemarius/vee-validate-repro

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[olemarius]

Found that this is a duplicate of:

https://github.com/logaretm/vee-validate/issues/4156 https://github.com/logaretm/vee-validate/discussions/4132

Will try modifying vite.config.ts and close if that solves it for me

[olemarius]

dedupe solved it!

https://github.com/olemarius/vee-validate-repro/commit/a3c1df8752e148984edc69bf5b25c2659529c02a