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.

[MariuzM]

Same issue for me, this module can't be used with Next.js

[fabian-hiller]

Sorry, at the moment I can't find the time to fix it. I will note it in the documentation.

[MariuzM]

No problem thank you

[rnwonder]

Damn, this is sad I am trying to move a project from solidjs SPA to next 13. used modular forms on solidjs thought It would be a smooth transition but this is sad to see. Anyways, please take a look at it only when you have the time no pressure. I really love the library it's a breeze to use on solidjs. Keep up the amazing work!

[MariuzM]

Are you using preact react signals maybe try preact core signals that works in next js

[fabian-hiller]

@MariuzM thank you for this hint. Is there any proof of this? Does this then also work with React without Next.js? Then why does the Preact React Signals package exist at all?

[MariuzM]

I found this from the comment here: vercel/next.js#45054

Briefly i tried with Preact and usign core worked on my Next

For me personally i'm using right now in Next

import { useAtom } from 'jotai';
import { atomSignal } from 'jotai-signal';

export const pageLoader = atomSignal(true);
pageLoader.value = false;
const [isLoading] = useAtom(pageLoader);
<div>{isLoading}</div>

[fabian-hiller]

@preact/signals-core cannot be integrated into React without additional effort. So this is not a quick solution. Jotai is something I can take a look at. However, since currently most users are using Modular Forms with SolidJS and Qwik, I should work on other issues first before that.

[alzalabany]

really sad that we cannot use this library with nextjs;
would have been nice if it was mentioned in docs.

[fabian-hiller]

@alzalabany there should be an info in the installation guide.

[awhitford]

I am interested in using this for a new NextJS 14 project.
I appreciate the warning in the Installation Guide.

According to this discussion, it looks like (NextJS 14 + @preact/signals-react-2.0.0 + @preact/signals-react-transform) works now. Maybe PR #191 solves this?

[fabian-hiller]

It would be create if you could test it after I merged your PR 🙏

[aokigit]

Just tried @modular-forms/[email protected] with @preact/[email protected] and [email protected] on Nextjs 14.2.3 and it seems to be working just fine. I put the form in a client component obviously and building the site worked without any issues.

Am I missing something? 😅

[fabian-hiller]

Thank you! This means I can remove the info about Next.js in our documentation.

[fabian-hiller]

Have you tried bundling your Next.js app with Modular Forms?

[aokigit]

Have you tried bundling your Next.js app with Modular Forms?

I have not. If you can guide me how I go about doing this, I'll gladly test this for you.

[fabian-hiller]

It's probably the npm run build and than the npm run start script.

[aokigit]

It's probably the npm run build and than the npm run start script.

Oh, so just building it. Yes, I've done that and it works just fine.

[fabian-hiller]

Thanks for the info!