Can't Build React/Next Project - Found Page Without a React Component as Default Export (Context API File)

Can't build React/Next project - found page without a React Component as default export (context api file)

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.

Got the error Build optimization failed: found page without a React Component as default export in pages/

In your frontend/src/pages/index.tsx file, change...

// missing `default`
export function Home() {
  return <LoginPage />;
}

...to...

// add `default`
export default function Home() {
  return <LoginPage />;
}

I keep getting this Server Error - Error: The default export is not a React Component in page: /products/all

Your component file doesn't have a default export. Either change your import to:

import {allProducts as products} from "../../../server.json"

OR make it the default export:

export default function allProducts({ products }: ProductList) {

---

Related Topics