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 the same error a few days back.

A 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 it 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

This happened to me because I had a /components folder inside my /pages folder. Because I'm new to Next.js, I didn't realize even folders in the /pages folder become URLs, so my /components/Navbar.js file was actually reachable via localhost:3000/components/Navbar. Because Navbar took props, those props weren't being passed properly because... well, how could they be? Next.js was trying to build that Navbar page and couldn't, so threw the error.

The fix was just to move /components out to the root directory.

Answer 3

Adding fallback like this worked for me:

{fallback: false}

Answer 4

If your fallback is set to true you need to handle the fallback state.

You need to add

if (router.isFallback) {
    <h1>Data is loading</h1>;
}

You can put anything in the body of if statement, and this is going inside the function component like this

const PostDetails = ({ post }) => {
  const router = useRouter();

  if (router.isFallback) {
    <h1>Data is loading</h1>;
  }

  return (

)

Answer 5

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 6

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 7

Add fallback on your page component like this:

    const {
    isFallback,
} = useRouter();

if (isFallback) {
    return <h1>Fallback</h1>;
}

Answer 8

In my case I just install the "eslint" by adding this to my script "lint": "next lint" then I just run the script by typing "npm run lint" then I select "recommended", after installation I run the script again by typing "npm run lint", this time it gave me an error saying that I should downgrade the "eslint" to "version 7" the good thing is they already gave the "npm command" that I should type to downgrade the version, just follow the description. then run the "eslint" again until "you don't see any errors in the installation".

then run the "npm run build" this will give you a definitive description of all the errors in the code and why the "build process is failed"

based on the errors. I fixed the following.

all exported components in my pages folder should be like this:

const Home = () => {
  return()
}
export default Home

not this:

const home = () => {
  return()
}
export default home

I have unused import { useState } from 'react' so I remove it.

I have a prop on the about page that I never use.

const About = ( { listings } ) => {
  return()
}

and I use the getStaticProps() to call data from pages/api/mydata so I change it to getServerSideProps()

then I try the "npm run build" again, this time it gave me no errors and the build process was successful.

Answer 9

In my case I discovered that the error occurred because I was mapping through an array and I needed to check if the array existed or not first.

using the && i.e. logical and assignment operator like this data && data.map()=> solved it for me

Answer 10

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

Answer 11

I had the following error because I declared my functional component like this by mistake.

async functionName() {
...
}
export default functionName

I changed it to

const FunctionName = () => {
...
}
export default FunctionName

I hope it would also work for someone who faces the same error.

Answer 12

My problem was that route, while it existed, had an error in it that wasn't being shown. In my case where I have MDX files that are being used with next.js to generate routes, one of my MDX files had a property/value that was invalid.

For example, if you have the following in an MDX:

---
slug: test-mdx-post
title: This is a test post
date: 2020-06-10
topics:
  - stackoverflow
---

If stackoverflow is not a valid topic assigned elsewhere, you'll get the error Export encountered errors on following paths: on your /blog/test-mdx-post or whatever your equivalent route is for that MDX.

In short, check that your MDX files are spell-checked and all properties and values are usable.

Answer 13

In my case this happened when backend API was down. So you need to wait till backend API will reset and try again

Answer 14

After Deleting node modules and installing them again, by running yarn install, error got resolved.

Answer 15

I got this error, I found out that I unintentionally imported useEffect dependency like this

import { useEffect } from 'react/cjs/react.development';

Once, I updated it and imported it from 'react'.

import React, { useEffect } from 'react';

I am able to build the project.

Answer 16

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 17

You should run your project on 'dev' mode, then go to url -from mentioned in terminal- on browser. You will see "more detailed error" on console or terminal

Answer 18

Just in case someone is still facing this issue:

I solved this by moving a file (that was a class and wasn't rendering a page) under the 'pages' folder to a different folder.

I had a file 'ErrorBoundary' with a class that was used to wrap my application, and it was under the 'pages' folder but it was not rendering a page (it was a class) - so I moved it to a different folder and it fixed this issue.

References:

https://nextjs.org/docs/advanced-features/error-handling

Answer 19

In my case the slug was react, so the path was category/react

The problem was resolved when deleting this slug.

Answer 20

In my case I forgot to export getStaticProps function

// this is wrong    
const getStaticProps: GetStaticProps = async () => {...}

// should be exported
export const getStaticProps: GetStaticProps = async () => {...}

Answer 21

I do not know what exactly caused my own problem, but I encountered a build failure due to this error - "Error: Export encountered errors on following paths:..."

I was able to resolve the issue by performing a project restructuring - I moved all my page components (all the component folders containing all the components) out of the pages folder.

It seems NextJs will only accept pages in the pages folder. So ensure to structure your project using other method(s) that leaves all your components outside.

Answer 22

Okay, let me tell you what's causing the problem, I was using a JS file as a component like I was using <Hero/> and <Hero> component is receiving props from index.js file in my directory

// Code Sample
export default function Home({ posts }) {
  return (
     <>
     <Hero posts={posts}/>
     </>
)
}

Like this, it works fine, but when I run my file independently (going to /Hero), it gives me an error. So fixing this will not return any error anymore!!

Answer 23

I have the issue with my blitzjs application, the errors:

> Build error occurred
Error: Export encountered errors on following paths:
        /products/new
.....at async Span.traceAsyncFn
.... 

So wrapping the async call inside a Suspense will fix the issue.

before:

// products/new.ts

const NewProductPage = ()=> {
  const currentUser = useCurrentUser(); // async call
   
  return <div>{currentUser.displayName}</div>;
}

after:

// products/new.ts

const DisplayUserName = ()=>{
  const currentUser = useCurrentUser(); // async call
  return <div>{currentUser.displayName}</div>;

}

const NewProductPage = ()=> {   
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <DisplayUserName />
    </Suspense>);
}

blitzjs blitzjs-tutorial

Answer 24

This happened to me, but error was not undefined, rather it was caused by a .DS_Store file.

Error: Export encountered errors on following paths:
        /articles/[id]: /en/articles/.DS_Store

Lesson learned there, be careful what you put in your getStaticPaths function! Check your getStaticPaths to see which paths you are adding!

export const getStaticPaths = () => {
  // Log what you are actually are returning in this function to see 
  // if you are sending a param which is undefined, .DS_Store or 
  // something other you shouldn't send.
}

What I did, was to read the content of a folder. One day, a wild .DS_Store file appeared in that folder and I returned it as params in getStaticPath :)

Answer 25

Make sure all dependencies in your useEffect are valid. In my case, there is a call of null or undefined object. But, for some reason, it is not detected in dev runtime.

useEffect(() => {
  //code here
}, [obj.a.b]) // <- obj.a is undefined

You can use ? notation to make sure it is safe. Like so

obj?.a?.b

Answer 26

So just sharing my experience in case it's relevant.

I fell into the noobie trap of creating a server side component (page) that was fetching its data from a local hosted API.

Thing here is...

• the API isn't up and running at the time the build is performing
• I was exposing an API unnecessarily, as it's a server side component I had access to the data source directly

Common newbie traps But maybe verbalising this (or writing it?) for others may make you have that "i'm being an idiot" moment that you so desperately need.

Answer 27

In my case there was a low internet connection when I reconnected to the internet and build it again, it was built successfully.

Answer 28

for me I forget to connect my devies to internet and that is why i was geting this error