How to fix Page "/pages/..." is missing default export in React

What this error means

In Next.js projects using the Pages Router (the `pages/` directory), every file is automatically mapped to a route based on its filename. For this routing system to work, Next.js requires each page file to export a React component as the default export. This component is what gets rendered when users navigate to that route. When you see this error, it means Next.js found a file in your `pages/` directory but couldn't find a valid default export. The build system expects to import your page and render it, but there's nothing (or nothing valid) being exported as the default. This is a fundamental requirement of the Pages Router architecture and differs from the App Router (introduced in Next.js 13+), which uses a different file structure with `page.tsx` files and different export requirements.

Typical symptoms

• Build fails with "Page is missing default export" error message
• Development server shows error overlay when navigating to the route
• Error message includes the specific page path (e.g., "/pages/about.js")
• The page file exists in the pages directory but won't render
• TypeScript shows no errors but Next.js build still fails

Common causes

1. The page file has only named exports instead of a default export
2. The page file is completely empty or has no export statement
3. Using "export { Component }" instead of "export default Component"
4. The file exports a non-component value (object, string, number) as default
5. Accidentally using module.exports syntax instead of ES6 export default
6. The file was meant to be a utility/component but placed in pages directory
7. Copy-paste errors where the export statement was removed or corrupted

How to fix "Page "/pages/..." is missing default export"

// ✅ Correct - default export of a React component
export default function MyPage() {
  return <h1>Hello World</h1>;
}

// ❌ Incorrect - only named export
export function MyPage() {
  return <h1>Hello World</h1>;
}

// ❌ Incorrect - no export at all
function MyPage() {
  return <h1>Hello World</h1>;
}

// Option 1: Function declaration with export default
export default function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page</p>
    </div>
  );
}

// Option 2: Arrow function
const AboutPage = () => {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page</p>
    </div>
  );
};

export default AboutPage;

// Option 3: Separate declaration and export
function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page</p>
    </div>
  );
}

export default AboutPage;

// Before (named export - won't work)
export function Dashboard() {
  return <h1>Dashboard</h1>;
}

// After (default export - works)
export default function Dashboard() {
  return <h1>Dashboard</h1>;
}

// This is valid - default export for component, named exports for data fetching
export default function UserPage({ user }) {
  return <h1>{user.name}</h1>;
}

export async function getServerSideProps(context) {
  // Fetch user data
  return { props: { user: {} } };
}

# Move shared components to a components directory
mv pages/Button.tsx components/Button.tsx

# Move utilities to a lib or utils directory
mv pages/helpers.ts lib/helpers.ts

# Move types to a types directory
mv pages/types.ts types/index.ts

// ❌ Incorrect - exporting a string
export default "Hello World";

// ❌ Incorrect - exporting an object
export default { title: "My Page" };

// ❌ Incorrect - exporting undefined
export default undefined;

// ✅ Correct - exporting a React component
export default function MyPage() {
  return <div>Hello World</div>;
}

Advanced notes

import type { NextPage } from 'next';

const Home: NextPage = () => {
  return <h1>Welcome</h1>;
};

export default Home;

Frequently asked questions

What does "Page "/pages/..." is missing default export" mean?

js projects using the Pages Router (the pages/ directory), every file is automatically mapped to a route based on its filename. js requires each page file to export a React component as the default export. This component is what gets rendered when users navigate to that route.

How do I fix "Page "/pages/..." is missing default export"?

This error occurs in Next.js when a file in the pages directory does not export a default React component. The Next.js Pages Router requires every page file to have a default export containing a valid React component.

What causes "Page "/pages/..." is missing default export"?

The page file has only named exports instead of a default export The page file is completely empty or has no export statement Using "export { Component }" instead of "export default Component"

Is the "Page "/pages/..." is missing default export" error serious?

Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Related errors

• revalidatePath can only be used in a Server Action

  How to fix "revalidatePath can only be used in a Server Action" in React

  MEDIUM

• Error: The page component must be a valid React component

  The page component must be a valid React component

  HIGH

• revalidateTag can only be used in a Server Action

  How to fix "revalidateTag can only be used in a Server Action" in React

  MEDIUM

• NextRouter was not mounted

  How to fix Next.js navigation errors in the pages directory

  HIGH

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  Next.js - Pages and Layouts Structure(Official Docs)
• 📖
  Next.js - Page File Convention(Official Docs)
• 🐙
  Next.js GitHub Discussions - Routing Issues(GitHub)
• 📖
  Next.js - TypeScript Configuration & Route Types(Official Docs)