Builds failing in Next13

[paulpopus]

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)
    //...

[fabian-hiller]

I need more info to be able to investigate the problem. Where in the code does the error point to? Is it the Field component?

[paulpopus]

Hey @fabian-hiller sorry for the late reply here, thought I had it fixed...

It seems to be caused inside the useForm hook

const [contactForm, { Form, Field }] = useForm<ContactForm>()

I can give you access to my repo if you need it. But I'm on the latest Next13 and including my Contact form into a static page inside the App router and then just doing a static build with yarn build

[fabian-hiller]

Does that mean that it still doesn't work for you? At the moment I don't have the time to take a closer look.

[paulpopus]

Yeah it still doesn't work, and it only doesn't work when building, making this more difficult to debug. I'll see if I can set up a repo later this week to better reproduce this

[paulpopus]

I went ahead and tried to debug and it looks like it's not an issue of modular-forms at all but with preact/signals preactjs/signals#297

I'll leave this issue open for now in case others are coming across this if that's ok until it's fixed upstream, although it looks like the issue there is quite stale

[paulpopus]

Sorry to ping a third time, but I looked more into it, looks like Preact's signals lib is prone to being broken by updates to React's core APIs due to hacky implementation facebook/react#26704 (comment)

@fabian-hiller Are you open to replacing signals as a dependency in modular-forms?

[fabian-hiller]

Are you open to replacing signals as a dependency in modular-forms?

Is there an alternative to Preact Signals? Or do you mean without Signals at all?

[paulpopus]

Is there an alternative to Preact Signals? Or do you mean without Signals at all?

I don't know of any direct Signals replacement unfortunately. So either using a different and still lightweight state management or doing away with it entirely for the React package.

No other state management library will have the same performance as Signals though.

It's also possible the Preact team fixes this issue, though unlikely given it's from January and it can affect the library's health long term.

[fabian-hiller]

I leave the issue open temporarily. I don't currently have the time to replace Preact Signals. Modular Forms for React is basically just a copy of the Preact version. Sorry that the library is currently not working for you.

[paulpopus]

No worries mate, I appreciate it nonetheless. Hopefully I'll get to use it on a Solidjs project, I like how it works!

[Sax-Yusuph]

Is there an alternative to Preact Signals? Or do you mean without Signals at all?

Hi Fabian, just to add to this, I think valtio
might be worth looking into.

I also faced the same issue with nextjs.

[fabian-hiller]

Thanks a lot for the tip. As soon as I find time, I will have a look at Valtio.