[v1] Prop id did not match

[adaboese]

Describe the bug and the expected behavior

Trying out v1 and getting error:

Warning: Prop aria-describedby did not match.
Server: ":R1cop:-form-item-description" Client: ":Rkop:-form-item-description"

Appears that server IDs do not match client IDs.

Conform version

v1.0.0

Steps to Reproduce the Bug or Issue

const MewPasswordForm = () => {
  const fetcher = useFetcher<typeof action>();

  const [form, fields] = useForm({
    lastResult: fetcher.data,
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: FormDataZodSchema });
    },
  });

  const submitting = fetcher.state === 'submitting';

  return (
    <FormProvider context={form.context}>
      <fetcher.Form
        className={formRoot()}
        method="post"
        {...getFormProps(form)}
      >
        {form.errors ? (
          <div className={formMessage({ type: 'error' })}>{form.errors[0]}</div>
        ) : null}

        <Form.Field input={fields.password}>
          <Form.Item>
            <Form.Label>New Password</Form.Label>
            <Form.Control>
              <Input
                disabled={submitting}
                placeholder=""
                type="password"
                {...getInputProps(fields.password)}
              />
            </Form.Control>
            <Form.Message />
          </Form.Item>
        </Form.Field>

        <Wrap>
          <Button
            alignSelf="flex-start"
            className={css({
              display: 'block',
              width: '100%',
            })}
            disabled={submitting}
            name="intent"
            type="submit"
            value="new-password"
          >
            Update Password
          </Button>
        </Wrap>
      </fetcher.Form>
    </FormProvider>
  );
};

What browsers are you seeing the problem on?

No response

Screenshots or Videos

No response

Additional context

No response

[edmundhung]

All ids generated are just prefixed with an id created using the useId() hook. The id is stable unless the component tree is different as mentioned in the docs:

With server rendering, useId requires an identical component tree on the server and the client. If the trees you render on the server and the client don’t match exactly, the generated IDs won’t match.

I am not sure if Conform has any impact here as the only thing you rendered using Conform is the <FormProvider /> and it is working fine during my tests so far. It would be great if you can share a repo on codesandbox / stackblitz.

[adaboese]

I figured out the issue and it was indeed a mistake in my own code. Thanks!

[adaboese]

The v1.0.0 is doing something weird.

The moment I add useForm from v1.0.0 to my component tree, a bunch of other components (entirely unrelated to Conform) start breaking with errors like:

Prop id did not match. Server: "accordion::R4lgp::trigger:What makes a good source article?" Client: "accordion::R29gp::trigger:What makes a good source article?"

[adaboese]

I have reduced the entire example down to just:

import { Accordion as ArkAccordion } from '@ark-ui/react/accordion';
import { useForm } from '@conform-to/react';
import { useFetcher } from '@remix-run/react';

const Route = () => {
  useFetcher();

  useForm({});

  return <ArkAccordion collapsible />;
};

export default Route;

package.json:

"@ark-ui/react": "^1.2.1",
"@conform-to/react": "1.0.0-pre.6",
"@remix-run/react": "2.4.1",

This gives error:

Warning: Prop id did not match. Server: "accordion::R5gp:" Client: "accordion::R1gp:"

If you comment out useForm, the error goes away.

[adaboese]

I wonder if related remix-run/react-router#11166. Haven't had a chance to test yet

[edmundhung]

Please try this solution suggested from the original issue or upgrade to remix v2.5 to see if it is resolved.

[adaboese]

Confirming that this is no longer an issue in Remix v2.5. Thank you!