TanStack
[vue-form] Different behavior between SSR and SSG with form.Field wrapper
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
Try using my adapter
https://github.com/teleskop150750/form/blob/refactor/vue/packages/vue-form/src/index.ts
https://github.com/TanStack/form/pull/1371
I also recommend paying attention to modular-forms
