Next JS build failing due to ''Export encountered errors on following paths"

Question

I am encountering this build error when I deploy my next js site to vercel

15:02:38    > Build error occurred
15:02:38    Error: Export encountered errors on following paths:
15:02:38        /about/undefined
15:02:38        at exportApp (/vercel/workpath0/node_modules/next/dist/export/index.js:30:1103)
15:02:38        at processTicksAndRejections (internal/process/task_queues.js:97:5)
15:02:38        at async /vercel/workpath0/node_modules/next/dist/build/index.js:39:69
15:02:38        at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:1:525

My website does not have a page called about, so I really don't know what this error is referring to. I checked as much as I could to find a reliable answer, but couldn't. Any help is appreciated!

Answer 1

I ran into same error few days back. few Points I would want to clarify.

1. Build happens as per the pages and URLs of the browser. if you are seeing something like

Export encountered errors on following paths: /about

Then you should copy "/about" and paste in front of the current url like:

http://localhost:3000/about

then you will see the error or any major warning. resolve it, you are ready to Build.

Answer 2

Adding fallback like this worked for me:

{fallback: false}

Answer 3

In my case, I am not using the props when declaring them with component and then using them in that conponent like this

Like in Home Component, declaring the props with component

const Home = () => {
....
....
return (
...
<MyComponent prop1={prop1} prop2={prop2} />
...

)
};

and then using it like this in MyComponent in different way

const MyComponent = ({prop1,prop2}) => {
};

Hence causing problem.

Soln

So I removed props2 from Home as it is a very small function and defined the function in MyComponent only.

Answer 4

I got this error too. I found out that I was using a component without props. Removing it or passing props will fix the issue

Answer 5

The problem was resolved by outputting the following log. All pages have been logged.

export async function getStaticProps({ params: {slug} }) {
  // ↓add 
  console.log(`Building slug: ${slug}`)
}

Answer 6

I discovered that there was an object without a property that was needed to generate the page. Once I removed it, all was well