Fixing Vercel build errors when using React Compiler

Have you ever seen something like this?

Error: Could not find the module "/vercel/path0/app/.../..." in the React Client Manifest. This is probably a bug in the React Server Components bundler.

I spent multiple hours chasing this bug today and finally found a solution. It wasn't a bug in the code, but a problem with the experimental compiler on Vercel.

Everything worked fine locally, of course.

When deployed to Vercel, I was getting a build error. Googling came up with a bunch of answers that did not help.

Solution

Yes, that's literally it. Stupid, but it works.

Hoping this saves someone else an hour or two of their lives.

React Hook Form is also affected

Turns out using the watch function from react-hook-form also causes errors with version 7.54.2.

The fix is to slap a 'use no memo' inside your function like this:

1export function MyForm() {
2  "use no memo";
3
4  const { watch } = useForm();
5  const value = watch("name");
6
7  return <div>{value}</div>;
8}

You can read more about the 'use no memo' directive and React Compiler in Next.js 15 docs.

next.config.js: reactCompiler | Next.jsEnable the React Compiler to automatically optimize component rendering.nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler