[vue-form] Different behavior between SSR and SSG with form.Field wrapper

[AlexPaven]

Describe the bug

It's very likely this is due to some fundamental misunderstanding of mine, if that's the case I apologize.

In a nuxt app I tried wrapping form.Field in a component of my own, so I can provide some additional default functionality. Everything was fine in dev but I'm publishing my app using SSG, and there the form failed to render completely, saying "Cannot destructure property 'field' of 'undefined' as it is undefined."

I was finally able to find a workaround: in my component render form.Field dynamically using <component :is="form.Field" v-slot="{ field }"> and this seems to work fine; but it bugs me that I don't understand what the underlying issue is, and I would appreciate any pointers.

Perhaps this is a nuxt or vue issue but I have not been able to reproduce this with other components...

Your minimal, reproducible example

https://codesandbox.io/p/devbox/fancy-framework-hzpqyd

Steps to reproduce

The provided codesandbox reproduces the issue on startup; it is configured to run genserve which runs nuxt generate and then serve on the output. Running the dev configuration in there behaves fine.

I also tried to enable sourcemaps in nuxt.config.ts but the sourcemap for my component seems to be generated incorrectly; it shows the error happening somewhere in tanstack code.

Expected behavior

I would expect the same behavior in SSR and SSG

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: Win11
• Browser: Chrome 134
• Node 20.18

TanStack Form adapter

vue-form

TanStack Form version

1.3.0

TypeScript version

No response

Additional context

No response

[teleskop150750]

Try using my adapter

https://github.com./teleskop150750/form/blob/refactor/vue/packages/vue-form/src/index.ts

#1371

I also recommend paying attention to modular-forms