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

Adding fallback like this worked for me:

{fallback: false}

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

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.

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}`)
}

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

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.

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 (

)

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

Add fallback on your page component like this:

    const {
    isFallback,
} = useRouter();

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

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.

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

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.

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

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

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.

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.

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.

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

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

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

The problem was resolved when deleting this slug.

In my case I forgot to export getStaticProps function

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

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

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.