49

I'm trying to build my Next.js project but it keeps giving me this error in the terminal:

Error: Build optimization failed: found page without a React Component as default export in 
pages/components/context/Context

That's the React context API file, there isn't supposed to be any default export there. Is this a bug or what?

0

4 Answers 4

101

You should move your components outside the pages folder. pages/ should only be used for page components as Next.js routing is based on its structure.

Next.js has a file-system based router built on the concept of pages.

When a file is added to the pages directory it's automatically available as a route.

By default, Next.js assumes anything under the pages folder is a page component and will try to build each file as a page.


Even though the above is the default behaviour, you can configure your Next.js app to include non-page files in the pages directory.

To do so, you can modify the pageExtensions entry in the next.config.js file as shown below. Then rename your page components to have a file extension that includes .page (_document.page.js, _app.page.js, index.page.js, etc).

module.exports = {
    pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}

With this configuration, Next.js will ignore any file that doesn't contain .page for the purpose of building pages/API routes and routing.

6
  • 2
    @MuhammedOzdogan There is a workaround if you do want to include non-page components inside the pages folder using Custom Page Extensions. See Is it possible to put test files under pages directory in Next.js?. Mar 14, 2022 at 10:24
  • 3
    Thank you. Storing test files or state related stuff in another directory makes things harder to read and flow. Mar 14, 2022 at 10:42
  • 1
    wow, i tried the solution you provided and it works Jul 28, 2022 at 14:25
  • 1
    This is great! Next.js team here is allowing for customization of what is loaded in main "/pages". Thanks for this! Sep 22, 2022 at 21:49
  • 2
    As it works great for the first time, for me it did redirect to 404 page locally.
    – Or Assayag
    Apr 21 at 12:18
3

In my case, I had an empty file index.js in a folder. Using Nextjs Default Router

1

I had the same error.

If you comment out all other code but leave this NextJS won't get mad at you:

export default function Home1() {
  return <>{/* nothing */}</>;
}

I like to keep older index files and components locally and on github so this is a nice hack. I just copy all of the existing code add it to a new file and then add 1 to it for example:

index1.js

You can also leave a comment to kind of bring you and other devs up to speed as to why you did this for example:

//good for history of index implementation and associated syntax logic 

0

It seems to be not declared default export keyword in context component. Try it as follow:

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.