NextJS static build throws error unless errors object passed to ErrorMessage

[bennettrogers]

I've been using ErrorMessage with no issues on NextJS client-rendered pages. Based on the documentation, I haven't been passing the errors object to the ErrorMessage component since I'm using a FormProvider.

However, I just tried to use an ErrorMessage in a form on a NextJS statically exported page and it throws an error that says TypeError: Cannot read properties of null (reading 'formState').

After looking through the issues here and reading #52, I tried fetching the errors object inside my component using useFormContext, and passing this to the ErrorMessage. It seems to have resolved the issue.

This workaround works for me, but I wanted to see if this is expected behavior when exporting a static page.

Versions:
NextJS v12.1.0
React-Hook-Form v7.27.1
@hookform/error-message v2.0.0

[IngoValente]

Same here. Somehow this error was not triggered using next 11, but broke as soon as we upgraded to next 12.
Error only occurs when server renders the page.

Simple replication sandbox here: https://codesandbox.io/s/cocky-hellman-toj9b9?file=/pages/index.js
To replicate: remove the passed errors from ErrorMessage, and hit the refresh button in the sandbox browser.
Passing the errors or downgrading to next 11 solves the issue.

[lennerd]

I can confirm this. Both with a Remix and vitest setup.

[dextermb]

I've just come across this issue as well.

{
    "@hookform/error-message": "^2.0.1",
    "next": "13.0.6",
    "react-hook-form": "^7.40.0"
}

[fknop]

Same error with an NX workspace setup using webpack. It seems this library doesn't import the same version of the context

[elramus]

Anyone found a workaround for this? Running into it with Vitest. We can just mock the component of course, but it would be nice to be able to include its functionality in our unit testing.

[KirschX]

Same error here, passing errors directly from the parent component solved the error.

...
  const methods = useFormContext();
  const error = get(errors || methods.formState.errors, name);
...

seems like methods from useFormContext returns 'undefined', still don't know why.

[rtkac]

Same issue here after update to NX v15.9.7

[singingwolfboy]

I believe I've found the cause of this problem, although I don't understand why it's failing. The module bundler is using the CommonJS version of the file, rather than the ES Module version. (Note that NestJS 12 makes ESM module imports the default, which means that the rest of the system should switch over to ESM.)

The package.json file for this project lists main: "dist/index.js", which is a CJS file. It also lists "module": "dist/index.esm.js" on the next line. In my local testing, I could reliably reproduce the failure in an automated test, and then reliably fix the failure by manually editing the package.json file for this dependency to read "main": "dist/index.esm.js" -- that is, forcing it to use the ESM file for the "main" entrypoint.

Does this also fix the problem for others?