46

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?

Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
effydev
  • 488
  • 1
  • 5
  • 11

4 Answers4

96

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.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
  • This is too bad – Muhammed Ozdogan Mar 14 '22 at 10:16
  • 2
    @MuhammedOzdogan There is a workaround if you do want to include non-page components inside the `pages` folder using [Custom Page Extensions](https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directory). See [Is it possible to put test files under pages directory in Next.js?](https://stackoverflow.com/questions/70832134/is-it-possible-to-put-test-files-under-pages-directory-in-next-js). – juliomalves Mar 14 '22 at 10:24
  • 3
    Thank you. Storing test files or state related stuff in another directory makes things harder to read and flow. – Muhammed Ozdogan Mar 14 '22 at 10:42
  • 1
    wow, i tried the solution you provided and it works – abdulkareem alabi Jul 28 '22 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! – Marty McGee Sep 22 '22 at 21:49
  • 1
    As it works great for the first time, for me it did redirect to 404 page locally. – Or Assayag Apr 21 '23 at 12:18
3

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

Isaac Pitwa
  • 372
  • 2
  • 6
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
VibrationPositive
  • 301
  • 2
  • 8
0

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

const  Context = ()=>{
  ...
}
export default Context
hotbrainy
  • 331
  • 1
  • 10