modular-forms: Builds failing in Next13

Hi there, thanks for your work on this awesome package!

Implemented it in our Next13 project with the new App router and React’s RSCs and in local development it works all fine but can’t statically build.

We’re using the use client directive of course in our component that uses the provided hooks.

Here’ is our form component:

'use client'
import { useForm, SubmitHandler, email, minLength, required, maxLength } from '@modular-forms/react'
import React, { useState } from 'react'

type ContactForm = {
  email: string
  message: string
  privacyConsent: boolean
}

function Contact() {
  const [contactForm, { Form, Field }] = useForm<ContactForm>()
  const [isSubmitted, setIsSubmitted] = useState(false)

  const handleSubmit: SubmitHandler<ContactForm> = (values, event) => {
    const { email, message } = values

    if (email && message) {
      const options = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(values),
      }

      fetch('/api/contact', options)
        .then((response) => {
          if (response.ok) {
            setIsSubmitted(true)
          }
        })
        .catch((err) => console.error(err))
    }
  }

  return (
    <div className='block relative'>
      <Form onSubmit={handleSubmit} className='flex flex-col gap-8 p-4 justify-center items-center'>
        <Field name='email' type='string' validate={[required('Please enter your email.'), email('The email address is badly formatted.')]}>
          {(field, props) => {
            return (
              <div className='flex flex-col gap-2 w-full'>
                <label className='capitalize font-bold text-sm' htmlFor={'emailField'}>
                  {field.name}
                </label>
                <input id={'emailField'} required className='border-solid rounded-2 p-2 border-1px glass-bg' {...props} type='email' />
              </div>
            )
          }}
        </Field>
        <Field
          name='message'
          type='string'
          validate={[required('Please enter your message.'), maxLength(600, 'Your message is too long.')]}>
          {(field, props) => {
            return (
              <div className='flex flex-col gap-2 w-full'>
                <label className='capitalize font-bold text-sm' htmlFor={'messageField'}>
                  {field.name}
                </label>
                <div className='relative rounded-2'>
                  <textarea
                    id={'messageField'}
                    {...props}
                    className='w-full mb-1 max-w-full min-h-[10rem] max-h-[35rem] border-solid rounded-2 p-2 border-1px glass-bg'
                  />
                  <div className={`text-xs font-bold ${String(field.value).length > 600 ? 'text-red' : ''}`}>
                    {field.value ? String(field.value).length : '--'}/600
                  </div>
                </div>
              </div>
            )
          }}
        </Field>
        <button disabled={isSubmitted} className='button' type='submit'>
          Send message
        </button>
      </Form>
      {isSubmitted && (
        <div className='absolute top-0 left-0 flex items-center justify-center h-full  text-lg font-medium backdrop-filter backdrop-blur-sm w-full bg-tinted-green bg-opacity-90 p-4 rounded-[1rem]'>
          Thank you for your message!
        </div>
      )}
    </div>
  )
}

export default Contact

This is the build error:

Error occurred prerendering page "/contact". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useMemo')
    at exports.useMemo (/gitroot/node_modules/next/dist/compiled/react/cjs/react.production.min.js:29:208)
    at useFormStore (/gitroot/.next/server/chunks/3941.js:98:28)
    at useForm (/gitroot/.next/server/chunks/3941.js:131:16)
    at Contact (/gitroot/.next/server/app/(web)/contact/page.js:365:115)
    //...