T
TanStack•9mo ago
flat-fuchsia

[Partially solved] SSR/NextJS: "A component is changing an uncontrolled input to be controlled ..."

Hi all, I just followed this guide to get set up with TanStack Form + NextJS: https://tanstack.com/form/latest/docs/framework/react/guides/ssr I have been careful to pour over the code multiple times, and I believe I'm doing everything that the tutorial is doing, besides client-side validation (for the moment), and yet I still get the error/warning in the console that an input field is changing from uncontrolled to controlled. I've added logging to see that, indeed, the initial value of the inputs is undefined before being updated to empty string. This is my code, in the same order as the guide: form options 
import LogInForm from "@/types/LogInForm";
import { formOptions } from "@tanstack/react-form/nextjs";
 
export const loginFormOpts = formOptions<LogInForm>({
  defaultValues: {
    email: '',
    password: ''
  }
})
import LogInForm from "@/types/LogInForm";
import { formOptions } from "@tanstack/react-form/nextjs";
 
export const loginFormOpts = formOptions<LogInForm>({
  defaultValues: {
    email: '',
    password: ''
  }
})
server action 
"use server";

import { createServerValidate, ServerValidateError } from "@tanstack/react-form/nextjs";
import { loginFormOpts } from "./form-opts";

const serverValidate = createServerValidate({
  ...loginFormOpts,
  onServerValidate: ({ value }) => {
    if (value.password.length < 8) {
      return "Your password must be at least 8 characters long"
    }
  }
})

export default async function doLogIn(prev: unknown, formData: FormData) {
  try {
    await serverValidate(formData);
  } catch (e) {
    if (e instanceof ServerValidateError) {
      return e.formState
    }

    throw e
  }
}
"use server";

import { createServerValidate, ServerValidateError } from "@tanstack/react-form/nextjs";
import { loginFormOpts } from "./form-opts";

const serverValidate = createServerValidate({
  ...loginFormOpts,
  onServerValidate: ({ value }) => {
    if (value.password.length < 8) {
      return "Your password must be at least 8 characters long"
    }
  }
})

export default async function doLogIn(prev: unknown, formData: FormData) {
  try {
    await serverValidate(formData);
  } catch (e) {
    if (e instanceof ServerValidateError) {
      return e.formState
    }

    throw e
  }
}
client component 
"use client"

import { useActionState } from "react";
import { initialFormState } from "@tanstack/react-form/nextjs";
import { mergeForm, useForm, useStore, useTransform } from "@tanstack/react-form"
import doLogIn from "./action";
import { loginFormOpts } from "./form-opts";

export default function LogInPage() {
  const [state, action] = useActionState(doLogIn, initialFormState);

  const form = useForm({
    ...loginFormOpts,
    transform: useTransform((baseForm) => mergeForm(baseForm, state!), [state])
  })

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

  return (
    <form action={action as never} onSubmit={() => form.handleSubmit()}>
      {formErrors.map((error) => (
        <p key={error as string}>{error}</p>
      ))}

      <form.Field name="email">
        {(field) => {
          console.log(`email state: ${field.state.value}`)
          return (
            <>
              <input name="email" type="email" value={field.state.value} onChange={(e) => field.handleChange(e.target.value)} />
              {field.state.meta.errors.map((error) => (
                <p key={error as string}>{error}</p>
              ))}
            </>
          )
        }}
      </form.Field>

      <form.Field name="password">
        {(field) => {
          console.log(`password state: ${field.state.value}`)
          return (
            <>
              <input name="password" type="password" value={field.state.value} onChange={(e) => field.handleChange(e.target.value)} />
              {field.state.meta.errors.map((error) => (
                <p key={error as string}>{error}</p>
              ))}
            </>
          )
        }}
      </form.Field>

      <form.Subscribe selector={(formState) => [formState.canSubmit, formState.isSubmitting]}>
        {([canSubmit, isSubmitting]) => (
          <button type="submit" disabled={!canSubmit}>
            {isSubmitting ? '...' : 'Log in'}
          </button>
        )}
      </form.Subscribe>
    </form>
  )
}
"use client"

import { useActionState } from "react";
import { initialFormState } from "@tanstack/react-form/nextjs";
import { mergeForm, useForm, useStore, useTransform } from "@tanstack/react-form"
import doLogIn from "./action";
import { loginFormOpts } from "./form-opts";

export default function LogInPage() {
  const [state, action] = useActionState(doLogIn, initialFormState);

  const form = useForm({
    ...loginFormOpts,
    transform: useTransform((baseForm) => mergeForm(baseForm, state!), [state])
  })

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

  return (
    <form action={action as never} onSubmit={() => form.handleSubmit()}>
      {formErrors.map((error) => (
        <p key={error as string}>{error}</p>
      ))}

      <form.Field name="email">
        {(field) => {
          console.log(`email state: ${field.state.value}`)
          return (
            <>
              <input name="email" type="email" value={field.state.value} onChange={(e) => field.handleChange(e.target.value)} />
              {field.state.meta.errors.map((error) => (
                <p key={error as string}>{error}</p>
              ))}
            </>
          )
        }}
      </form.Field>

      <form.Field name="password">
        {(field) => {
          console.log(`password state: ${field.state.value}`)
          return (
            <>
              <input name="password" type="password" value={field.state.value} onChange={(e) => field.handleChange(e.target.value)} />
              {field.state.meta.errors.map((error) => (
                <p key={error as string}>{error}</p>
              ))}
            </>
          )
        }}
      </form.Field>

      <form.Subscribe selector={(formState) => [formState.canSubmit, formState.isSubmitting]}>
        {([canSubmit, isSubmitting]) => (
          <button type="submit" disabled={!canSubmit}>
            {isSubmitting ? '...' : 'Log in'}
          </button>
        )}
      </form.Subscribe>
    </form>
  )
}
One fix is to set the defaultValue prop on each field, but I feel like I should not need to do this given the default value is well defined in the form option object. I'm not sure what I've done wrong here, as after reading the guide again a few times, I've not noticed any discrepancy. How are you guys using TanStack Form w/ SSR and avoiding this problem? Or did I miss something? Thank you in advance.
3 Replies
flat-fuchsia
flat-fuchsiaOP•9mo ago
I've seen this as well: https://tanstack.com/form/latest/docs/framework/react/guides/debugging But I haven't forgotten the key in my useForm hook, so I don't think it is applicable.
Debugging React Usage | TanStack Form React Docs
Here's a list of common errors you might see in the console and how to fix them. Changing an uncontrolled input to be controlled If you see this error in the console: Warning: A component is changing...
flat-fuchsia
flat-fuchsiaOP•9mo ago
I've tried messing with the useActionState call because I had a suspicion the initialFormState value (that initializes the initial form state to undefined) had something to do with this, but I couldn't figure out a way to get that to work. I have no clue what to do about this, and at this point it's becoming a fairly massive blocker so I think I'm going to have to move on from this library for now. Nevermind. One last hail mary attempt to fix was changing this: 
const [state, action] = useActionState(doLogIn, initialFormState);
const [state, action] = useActionState(doLogIn, initialFormState);
to this: 
  const [state, action] = useActionState(doLogIn, {
    errorMap: {
      onServer: undefined,
    },
    values: loginFormOpts!.defaultValues!, // initialFormState has this initialized as undefined
    errors: []
  });
  const [state, action] = useActionState(doLogIn, {
    errorMap: {
      onServer: undefined,
    },
    values: loginFormOpts!.defaultValues!, // initialFormState has this initialized as undefined
    errors: []
  });
and it worked. The guide has us use initialFormState, defined as: 
export const initialFormState: ServerFormState<any> = {
  errorMap: {
    onServer: undefined,
  },
  values: undefined,
  errors: [],
}
export const initialFormState: ServerFormState<any> = {
  errorMap: {
    onServer: undefined,
  },
  values: undefined,
  errors: [],
}
And, so, yes, obviously the form has values starting as undefined. There was no way to change that based on the guide, so I figured I could just write my own "initial form state" where the values are explicitly the ones I defined before. This seems messy, and perhaps not what the library author intended, so I don't know the better way. But this works for now. I'll probably just write a helper to create the initial form state with specified values.
extended-salmon
extended-salmon•9mo ago
CC @Leonardo who's working on our SSR story

Did you find this page helpful?