Chapter 12: Object.fromEntries(formData.entries()) results in differing error messages

In the tips of Chapter12: 3. Extract the data from formData, the code const rawFormData = Object.fromEntries(formData.entries()) is introduced.

However, the results of parsing rawFormData defined in this way with zod are different from the tutorial results.

The message in the area framed in orange is different from that intended.

This is because when Object.fromEntries(formData.entries()) is used, some object fields are missing. Here are the results of an experiment I conducted for clarity:

export async function createInvoice(_prevState: State, formData: FormData) {
  console.log('Using formData.get()', {
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });

  console.log(
    'Using Object.fromEntries(formData.entries())',
    Object.fromEntries(formData.entries()),
  );
...

The output is as follows:

Using formData.get() { customerId: null, amount: '', status: null }
Using Object.fromEntries(formData.entries()) {
  '$ACTION_REF_2': '',
  '$ACTION_2:0': '{"id":"0191ab826a8245cefa48e225a0263ca6e8920a61","bound":"$@1"}',
  '$ACTION_2:1': '[{"message":null,"errors":{}}]',
  '$ACTION_KEY': 'k2946965071',
  amount: ''
}

To resolve this, appropriate modifications to the zod schema are necessary. Specifically, the following changes should be made:

const FormSchema = z.object({
  id: z.string(),
  customerId: z.string({
    invalid_type_error: 'Please select a customer',
+    required_error: 'Please select a customer',
  }),
  amount: z.coerce.number().gt(0, {
    message: 'Please enter an amount greater than $0.',
  }),
  status: z.enum(['pending', 'paid'], {
    invalid_type_error: 'Please select an invoice status',
+    required_error: 'Please select an invoice status',
  }),
  date: z.string(),
});

I suggest adding this issue and its resolution to the troubleshooting section. This would enhance the accuracy and usefulness of the documentation.

Thank you for providing such a valuable learning resource!

Start with the linked Chapter 12 section, “Extract the data from formData,” and compare its parsing example with the reported Object.fromEntries output. Update the troubleshooting documentation to explain the missing fields and include the required Zod schema errors shown in the issue; done when the tutorial’s intended validation messages are accurately documented.