This error occurs when a file expected to export a React component instead exports something else, or when Fast Refresh cannot properly identify component exports. It commonly appears in Next.js pages and Vite/React projects using Fast Refresh.
Fixes The default export is not a React component, and has been skipped
// ✅ Correct - Function component
export default function MyPage() {
return <div>Hello World</div>;
}
// ✅ Correct - Arrow function component
const MyPage = () => {
return <div>Hello World</div>;
};
export default MyPage;
// ❌ Wrong - Not a component
export default { title: 'My Page' };
// ❌ Wrong - Doesn't return JSX
export default function MyPage() {
console.log('Not returning anything');
}
// ❌ Wrong - Returns undefined
export default function MyPage() {
return;
}// ✅ Correct - Function componentexport default function MyPage() {return <div>Hello World</div>;}// ✅ Correct - Arrow function componentconst MyPage = () => {return <div>Hello World</div>;};export default MyPage;// ❌ Wrong - Not a componentexport default { title: 'My Page' };// ❌ Wrong - Doesn't return JSXexport default function MyPage() {console.log('Not returning anything');}// ❌ Wrong - Returns undefinedexport default function MyPage() {return;}The default export is not a React component, and has been skipped
This error appears in two main contexts: **Next.js Context**: Next.js expects every file in the `pages` directory to export a React component as the default export, since these files are automatically mapped to routes. When the default export is not a valid React component (such as a plain object, a non-component function, or undefined), Next.js throws this error because it cannot render the page. **Fast Refresh Context**: In development environments using Fast Refresh (Next.js, Vite, Create React App), this warning appears when a file contains mixed exports - both React components and non-component exports (like constants, utility functions, or contexts). Fast Refresh needs to identify which exports are components to efficiently hot-reload them while preserving state. Mixed exports prevent Fast Refresh from reliably determining what should be treated as a component. The error indicates a mismatch between what the build tool expects (a React component) and what your code is actually exporting.
Check that your default export is a function or class component that returns JSX:
// ✅ Correct - Function component
export default function MyPage() {
return <div>Hello World</div>;
}
// ✅ Correct - Arrow function component
const MyPage = () => {
return <div>Hello World</div>;
};
export default MyPage;
// ❌ Wrong - Not a component
export default { title: 'My Page' };
// ❌ Wrong - Doesn't return JSX
export default function MyPage() {
console.log('Not returning anything');
}
// ❌ Wrong - Returns undefined
export default function MyPage() {
return;
}Ensure your component function starts with an uppercase letter (React convention) and returns valid JSX.
If you're exporting both components and non-component values, move them to separate files:
Before (causes Fast Refresh issues):
// MyComponent.jsx
export const MY_CONSTANT = 'value';
export const myContext = createContext();
export default function MyComponent() {
return <div>Component</div>;
}After (Fast Refresh compatible):
// constants.js
export const MY_CONSTANT = 'value';
// context.js
export const myContext = createContext();
// MyComponent.jsx
import { MY_CONSTANT } from './constants';
import { myContext } from './context';
export default function MyComponent() {
return <div>Component</div>;
}This separation allows Fast Refresh to properly identify and reload components.
Ensure your component always returns JSX, even in conditional scenarios:
// ❌ Wrong - May return undefined
function MyComponent({ show }) {
if (show) {
return <div>Content</div>;
}
// Missing return statement
}
// ✅ Correct - Always returns JSX
function MyComponent({ show }) {
if (show) {
return <div>Content</div>;
}
return null; // Explicitly return null
}
// ✅ Correct - Conditional rendering
function MyComponent({ show }) {
return show ? <div>Content</div> : null;
}For Next.js pages, ensure the default export is the page component, not getServerSideProps or other exports:
// ❌ Wrong - Exporting data fetching function
export default async function getServerSideProps() {
return { props: {} };
}
// ✅ Correct - Component as default, data fetching as named export
export default function MyPage({ data }) {
return <div>{data}</div>;
}
export async function getServerSideProps() {
return { props: { data: 'example' } };
}In Next.js App Router, server components should export the component as default:
// app/page.tsx
export default function Page() {
return <div>Page content</div>;
}Verify you're not accidentally importing or re-exporting non-components:
// ❌ Wrong - Re-exporting a configuration object
import config from './config';
export default config;
// ❌ Wrong - Importing wrong entity
import { myUtility } from './utils';
export default myUtility;
// ✅ Correct - Importing and exporting component
import MyComponent from './MyComponent';
export default MyComponent;
// ✅ Correct - Direct component export
export { default } from './MyComponent';If using barrel exports, ensure you're exporting the component itself, not configuration or utility functions.
Fast Refresh Configuration: In Vite projects, you can configure eslint-plugin-react-refresh to allow specific named exports like loader or action (common in Remix/React Router):
// .eslintrc.js
{
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true, allowExportNames: ['loader', 'action'] }
]
}
}TypeScript Considerations: Ensure your component type annotations don't interfere with React's component detection:
// ✅ Correct
const MyComponent: React.FC = () => <div>Content</div>;
export default MyComponent;
// ✅ Also correct (preferred in modern React)
export default function MyComponent(): JSX.Element {
return <div>Content</div>;
}Higher-Order Components (HOCs): When using HOCs, ensure the final export is the wrapped component:
function MyComponent() {
return <div>Content</div>;
}
// ✅ Correct - Export the HOC result
export default withAuth(MyComponent);
// ❌ Wrong - Exporting HOC function itself
export default withAuth;Circular Dependencies: If you have circular imports, the component may not be properly initialized when exported. Use dynamic imports or restructure your code to break the circular dependency.
Next.js Custom App/Document: The _app.tsx and _document.tsx files have specific requirements. _app should export a component, while _document should extend Next's Document class. Mixing these up can cause this error.