This Next.js error occurs when a page file does not export a valid React component as its default export. Next.js requires every page file to export a function or class component that returns JSX.
Next.js validates that each page file exports a valid React component that can be rendered. This error appears when the default export is missing, exports something other than a React component (like a plain object, string, or non-component function), or when the exported function does not return JSX. In the Pages Router (`pages/` directory) and App Router (`app/` directory), Next.js expects page files to follow a specific pattern: they must default export a React component. The component can be a function component or class component, and in the App Router, it can also be an async server component. This validation happens during the build process and at runtime, ensuring that Next.js can properly render your pages and handle routing.
Open the problematic page file and ensure it has a default export:
// ✅ Correct - function component with default export
export default function MyPage() {
return <div>Hello World</div>;
}
// ✅ Correct - arrow function with default export
const MyPage = () => {
return <div>Hello World</div>;
};
export default MyPage;
// ❌ Wrong - named export instead of default
export function MyPage() {
return <div>Hello World</div>;
}
// ❌ Wrong - no export at all
function MyPage() {
return <div>Hello World</div>;
}Verify that your component function actually returns JSX:
// ✅ Correct - returns JSX
export default function MyPage() {
return <div>Content</div>;
}
// ❌ Wrong - no return statement
export default function MyPage() {
<div>Content</div>;
}
// ❌ Wrong - returns nothing
export default function MyPage() {
return;
}
// ❌ Wrong - returns non-JSX value
export default function MyPage() {
return "Hello";
}Make sure you are not accidentally exporting a non-component value:
// ❌ Wrong - exporting a plain object
export default {
title: "My Page",
content: "Hello"
};
// ❌ Wrong - exporting a string
export default "MyPage";
// ❌ Wrong - exporting a utility function
export default function fetchData() {
return fetch("/api/data");
}
// ✅ Correct - exporting a React component
export default function MyPage() {
return <div>My Page</div>;
}If you are re-exporting from another file, ensure the imported value is a React component:
// components/MyComponent.tsx
export const MyComponent = () => <div>Hello</div>;
// ❌ Wrong - re-exporting named export as default (syntax error)
// pages/index.tsx
export { MyComponent as default } from "@/components/MyComponent";
// ✅ Correct - import then export as default
// pages/index.tsx
import { MyComponent } from "@/components/MyComponent";
export default MyComponent;
// ✅ Better - define page component in the page file
// pages/index.tsx
import { MyComponent } from "@/components/MyComponent";
export default function HomePage() {
return <MyComponent />;
}In the App Router (app/ directory), page components can be async server components, but they must still return JSX:
// app/page.tsx
// ✅ Correct - async server component
export default async function Page() {
const data = await fetch("https://api.example.com/data");
const result = await data.json();
return <div>{result.title}</div>;
}
// ✅ Correct - async component with params
export default async function Page({
params
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params;
return <div>Post: {slug}</div>;
}
// ❌ Wrong - async function that doesn't return JSX
export default async function Page() {
const data = await fetch("https://api.example.com/data");
return data; // Not JSX!
}Sometimes the error persists due to cached build artifacts. Clear the cache and rebuild:
# Delete .next directory and node_modules/.cache
rm -rf .next
rm -rf node_modules/.cache
# Restart development server
npm run dev
# Or rebuild for production
npm run buildPages Router vs App Router differences: In the Pages Router (pages/ directory), you cannot use async function components directly as page components. Async data fetching must be done via getServerSideProps or getStaticProps. In the App Router (app/ directory), async server components are fully supported and encouraged.
TypeScript considerations: If using TypeScript, ensure your component types are correct. A component should have a return type that resolves to JSX.Element, React.ReactElement, or React.ReactNode. However, type errors alone will not cause this Next.js runtime error - the actual runtime export must be invalid.
Dynamic imports: If you are using dynamic imports with next/dynamic, ensure the dynamically imported component is itself valid. The error might appear to come from the page but actually originates from a dynamically loaded component.
Module resolution issues: Verify your import paths are correct and that TypeScript/JavaScript can resolve the modules. A failed import might result in undefined being exported as default, triggering this error.
Class components: If using class components, ensure they extend React.Component or React.PureComponent and have a render() method that returns JSX:
import React from 'react';
// ✅ Correct
export default class MyPage extends React.Component {
render() {
return <div>Hello</div>;
}
}
// ❌ Wrong - missing render method
export default class MyPage extends React.Component {
// No render method!
}Prop spreading could cause security issues
Prop spreading could cause security issues
Error: error:0308010C:digital envelope routines::unsupported
Error: error:0308010C:digital envelope routines::unsupported
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.
React Hook useEffect placed inside a condition
Hook can only be called inside the body of a function component
Hook can only be called inside the body of a function component
Rollup failed to resolve import during build
How to fix "Rollup failed to resolve import" in React