Tanstack Start Integration?

[adam-enition]

Is the tanstack start integration actually working for anyone? This could be a skill issue but I'm struggling to get it working as detailed in the docs. I have the exact setup as the tanstack form start example - https://tanstack.com/form/latest/docs/framework/react/examples/tanstack-start

First issue is in the handleForm code:

export const handleForm = createServerFn({ method: 'POST' })
  .inputValidator((data: unknown) => {
    if (!(data instanceof FormData)) {
      throw new Error('Invalid form data');
    }
    return data;
  })
  .handler(async (ctx) => {
    try {
      const validatedData = await serverValidate(ctx.data);
      console.log('validatedData', validatedData);
    }
    catch (e) {
      if (e instanceof ServerValidateError) { // <- Here, e is showing a ServerValidateError, but not an instanceof??
        return e.response;
      }

      setResponseStatus(500);
      return 'There was an internal error';
    }

    return 'Form has validated successfully';
  });

e.response is never returned as e does not appear to be a real instance of ServerValidateError which I am importing from @tanstack/react-form-start

If I change the above to:

export const handleForm = createServerFn({ method: 'POST' })
  .inputValidator((data: unknown) => {
    if (!(data instanceof FormData)) {
      throw new Error('Invalid form data');
    }
    return data;
  })
  .handler(async (ctx) => {
    try {
      const validatedData = await serverValidate(ctx.data);
      console.log('validatedData', validatedData);
    }
    catch (e) {
      if (e.name === 'ServerValidateError') { // <- Now works
        return e.response;
      }

      setResponseStatus(500);
      return 'There was an internal error';
    }

    return 'Form has validated successfully';
  });

This now works and e.response is correctly returned. However this then brings me to the next issues. Even thought I have transform set on useForm, the state doesn't seem to be set correctly. So for this:

export const Route = createFileRoute('/form-test')({
  component: Home,
  loader: async () => ({
    state: await getFormDataFromServer(),
  }),
});

function Home() {
  const { state } = Route.useLoaderData();

  const form = useForm({
    ...formOpts,
    transform: useTransform(baseForm => mergeForm(baseForm, state), [state]), // <-- Here
  });

  const formErrors = useStore(form.store, formState => formState.errors);

  return (
    <form action={handleForm.url} method="post" encType="multipart/form-data">
      {formErrors.map(error => (
        <p key={error as never as string}>{error}</p>
      ))}

      <form.Field
        name="age"
        validators={{
          onChange: ({ value }) =>
            value < 8 ? 'Client validation: You must be at least 8' : undefined,
        }}
      >
        {(field) => {
          return (
            <div>
              <input
                name="age"
                type="number"
                value={field.state.value}
                onChange={e => field.handleChange(e.target.valueAsNumber)}
              />
              {field.state.meta.errors.map(error => (
                <p key={error as string}>{error}</p>
              ))}
            </div>
          );
        }}
      </form.Field>
      <form.Subscribe
        selector={formState => [formState.canSubmit, formState.isSubmitting]}
      >
        {([canSubmit, isSubmitting]) => (
          <button type="submit" disabled={!canSubmit}>
            {isSubmitting ? '...' : 'Submit'}
          </button>
        )}
      </form.Subscribe>
    </form>
  );
}

The state should be being merged via the call to useTransform(baseForm => mergeForm(baseForm, state), [state]) but that doesn't seem to be the case. E.g. the age field is never populated with that from the state. So if I post an age of 3 for example, I'd expect the validation to fail and the form to load with the value of 3. It doesn't, it just goes back to the defaultValue (0 in the example case).

This is the same for the server validation errors. The errorMap on the form state looks to contain the correct errors, however these do not seem to be propagated to the individual fields.

Am I going mad or does this just not work yet?

[kein-1]

Doesn't work for me either; im super confused

[arihantverma]

I'm facing the same issues. I think after the extraction/migration of start specific login into @tanstack/react-form-start there are many issues that have crept up that weren't there before, including types loss across function chaining.

About the ServerValidateError instanceof check not working, I gave codex a try and this is what it said:

Vite's SSR mode maintains two separate module loading systems: Node.js's native loader (for externalized deps) and Vite's SSR module runner (for non-externalized deps). When @tanstack/react-form-start is loaded by both systems, two different copies of the ServerValidateError class exist in memory. instanceof checks the prototype chain, which only matches within a single class object.

It then created a temporary patch for me in react-form-state's code, on asking:

Added static [Symbol.hasInstance](instance) to ServerValidateError. This overrides instanceof behavior to check instance instanceof Error && instance.name === "ServerValidateError" instead of the prototype chain. Makes instanceof ServerValidateError work across Vite's dual module caches.

About the state not propagating properly with transform: I temporarily created a patch using the changes of #1890, and it seemed to work.

It has been a couple or days of figuring it out. All these fixes are specially needed to create progressive enhancement flows with Tanstack, and I hope they get fixed/identified soon.