Fix 'resolver is not a function' in React

This error means Next.js tried to call your API route handler, and what it found was not a function. In my case, the default export was missing. Restoring it fixed the error.

I ran into this rather puzzling message while working on a Next.js/React app:

TypeError: resolver is not a function

Turned out the solution was very simple.

Why does this error happen?

Next.js API routes work by convention. Each file inside pages/api must export a function as its default export. Next.js imports the file, takes the default export, and calls it with the request and response objects. Internally it calls that function the resolver. That’s where the error message comes from.

A working API route looks like this:

export default function handler(req, res) {
  res.status(200).json({ name: 'Flavio' })
}

If the default export is missing, Next.js ends up calling undefined as a function. And undefined is not a function, so you get the error.

That’s exactly what happened to me. I was doing some editing and I commented out the default export of the API route I was editing:

//export default handler

The file still compiled fine. There was no error in the editor. But at request time, Next.js had nothing to call.

So, make sure you have a default export and the error will go away.

Other ways to trigger the same error

The missing export is the most common cause, but a few variations produce the same message.

Using a named export instead of a default one:

export function handler(req, res) {
  res.status(200).json({ name: 'Flavio' })
}

This is valid JavaScript, but Next.js only looks at the default export. To Next.js, this file exports nothing useful.

Another one: exporting the result of calling the function, instead of the function itself.

export default handler()

Notice the parentheses. This runs handler once at import time and exports whatever it returns. Next.js then tries to call that return value. Drop the parentheses and export the function.

Whenever you see this error, open the API route mentioned in the stack trace and check its last lines. In my experience the default export is always the problem.

Related posts about react: