Reputation: 689

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

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!

Upvotes: 49

Answers (28)

Darknight777

Reputation: 71

Adding fallback to Next config like this worked for me:

{fallback: false}

Upvotes: 3

koalatree

Reputation: 165

In my case, I solved this problem by using :

(app/page.tsx)

export const dynamic = "force-dynamic";

export default async function FuncName() {...}

Upvotes: 2

MUHAMMAD AZEEM

Reputation: 135

In my case, I just wrapped my fetch statement into a try-catch block and the issue was resolved.

    const Page =async() => {
  let UserName;
  try{
    const res=await fetch('http://localhost:3000/api/users',{cache:"no-store"});
   UserName=await res.json();      
  }catch(e){
    UserName={username:""}
  }
  
  return (
    <div className='text-indigo-600  flex justify-center items-center h-screen'>
    <div className='font-bold text-2xl'>server side rendering for {UserName.username}
    <div>{ new Date().toLocaleTimeString()}</div>
    <div><AddToCar/></div>
      
</div>
  )
}

Upvotes: 1

Arnab Bhattacharya

Reputation: 185

If you get an error message like `Export encountered errors on following paths: /classSchedules/page: /classSchedules

info Creating an optimized production build`

Consider adding "use client" on top of the component. It should work fine.

Upvotes: 0

Marc

Reputation: 118

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.

Upvotes: 0

priyono

Reputation: 3

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

Upvotes: 0

Dennis Persson

Reputation: 1114

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 :)

Upvotes: 0

Sumant GK

Reputation: 396

I ran into the same error a few days back.

A few Points I would want to clarify:

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.

Upvotes: 24

vanduc1102

Reputation: 6245

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

Upvotes: 1

Eklavya Chandra

Reputation: 108

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!!

Upvotes: 0

Andrew James Okpainmo

Reputation: 123

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.

Upvotes: 0

Adilet Usonov

Reputation: 136

In my case I forgot to export getStaticProps function

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

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

Upvotes: 0

kyzinatra

Reputation: 21

Add fallback on your page component like this:

    const {
    isFallback,
} = useRouter();

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

Upvotes: 2

Y.Omar

Reputation: 11

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

The problem was resolved when deleting this slug.

Upvotes: 0

Niv Apo

Reputation: 1083

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

Upvotes: 0

Bilal Koçak

Reputation: 13

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

Upvotes: 0

gibbers

Reputation: 484

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.

Upvotes: 13

MagnusEffect

Reputation: 3925

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.

Upvotes: 0

Collins Amayo

Reputation: 46

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

Upvotes: 1

Syed Muhammad Ahmad

Reputation: 438

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.

Upvotes: 0

Kashish-2001

Reputation: 19

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

Upvotes: 0

Scrooppi

Reputation: 387

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

Upvotes: 0

Porter Lyman

Reputation: 355

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.

Upvotes: 0

Ruhith Udakara

Reputation: 2452

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 (

)

Upvotes: 5

sonen

Reputation: 11

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.

Upvotes: 1

Deepak

Reputation: 94

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.

Upvotes: 0

KS KS

Reputation: 21

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

Upvotes: 2

Aland Sleman

Reputation: 317

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

Upvotes: 1

Next JS build failing due to &#39;&#39;Export encountered errors on following paths&quot;

Answers (28)

Soln

Related Questions

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