[vue-form] Different behavior between SSR and SSG with form.Field wrapper
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.7k
- Forks
- 682
- Avg merge
- 5d 18h
- Merged PRs (30d)
- 7
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox and compare the working dev configuration with the generated output from nuxt generate followed by serve. Inspect the wrapper around form.Field, the dynamic <component :is="form.Field"> workaround, and nuxt.config.ts; done means identifying the SSR/SSG difference and making the form render consistently in both modes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxtjs, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100