Form composition hooks leading to dependency cycle

[jonnyroutley]

Hi there,

I've been making a form using the form composition hooks defined in the docs:
https://tanstack.com/form/latest/docs/framework/react/guides/form-composition#pre-bound-field-components

This basically leads to:

// field.tsx
import { useFieldContext } from '.'

export function TextField({ label }: { label: string }) {
  // The `Field` infers that it should have a `value` type of `string`
  const field = useFieldContext<string>()
  return (
    <label>
      <span>{label}</span>
      <input
        value={field.state.value}
        onChange={(e) => field.handleChange(e.target.value)}
      />
    </label>
  )
}

// index.tsx
import { TextField } from './text-field.tsx'

export const { fieldContext, formContext, useFieldContext } =
  createFormHookContexts()

const { useAppForm } = createFormHook({
  fieldContext,
  formContext,
  fieldComponents: {
    TextField,
  },
  formComponents: {},
})

This creates a dependency cycle -> the field needs useFieldContext whilst the createFormHook needs the field, which I'd like to avoid if at all possible. This has led to a bug whereby a direct import of the field in another file leads to an error: Error: Cannot access 'xField' before initialization, which is particularly nasty as it throws at runtime and TS doesn't catch it on build.

Any suggestions here beyond having everything in one file?

Cheers,
Jonathan

[LeCarbonator]

The contexts can be in their own file, which will resolve the cycle completely.

.
└── form/
    ├── formContexts.ts
    ├── formHook.ts
    └── TextField.tsx

[jonnyroutley]

😁 obviously! Cheers