Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
148
rated 0 times [  150] [ 2]  / answers: 1 / hits: 33503  / 3 Years ago, wed, january 6, 2021, 12:00:00

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?


More From » reactjs

 Answers
22

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.


[#50465] Wednesday, December 9, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
shelbiec

Total Points: 101
Total Questions: 106
Total Answers: 106

Location: Ivory Coast
Member since Fri, Oct 8, 2021
3 Years ago
;