Error occurred prerendering page "/components/FirstStep". Read more: https://err.sh/next.js/prerender-error TypeError: Cannot destructure property firstName of 'undefined' or 'null'.

[willvlad]

I've got a simple form that uses a useState hook to set initial values:

const [fields, setFields] = useState({ firstName: "", lastName: "", email: "", gender: "", date: "", city: "", phone: "", value: "", });

The form uses a couple of sub-components where the above fields are passed as props:

<FirstStep values={fields} /> );

The form runs fine on the dev side, but when running npm run build, it throws the above error. I guess the useState values are being ignored by NextJS on the build, but wonder why and how to work around that? Any ideas anyone?

[jamesmosier]

Could you share how the values prop is being used in FirstStep?

[willvlad]

Quite the normal way. Just destructuring firstName from from the values passed as props from above.

const FirstStep = ({
  values: { firstName, lastName, email, gender }
}) => {
  // Check if all values are not empty
  const isNotEmpty = firstName.length > 0 && lastName.length > 0 && gender.length > 0 && email.length > 0;

  return (

               <TextField
            label="First Name"
            name="firstName"
            placeholder="Your first name"
            defaultValue={firstName}
          />
...
     );
});

Any thoughts?

[jamesmosier]

Hmm I'm not sure actually. I just spun up a project with:

const [fields, setFields] = useState({ firstName: "", lastName: "", email: "", gender: "", date: "", city: "", phone: "", value: "", });

return <FirstStep values={fields} />

const FirstStep = ({ values: { firstName, lastName, email, gender } }) => {
  const isNotEmpty =
    firstName.length > 0 &&
    lastName.length > 0 &&
    gender.length > 0 &&
    email.length > 0;

  return <div>first step</div>;
};

export default FirstStep

and then ran a next build and the build did not break 🤔

If you log out fields after your useState hook, what it output during your build?