TanStack / TanStack/form

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

Open
#1,395 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

v1 v2: needs investigation
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.