How to fix The default export is not a React component, and has been skipped in React

ReactBEGINNERMEDIUMUpdated Dec 9, 2025· 171 views

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.

Quick fix

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;
}
  1. Verify the default export is a valid React component
  2. Separate component and non-component exports
  3. Check for correct component return statements
  4. Fix Next.js page exports
react — error
// ✅ 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;
}
The default export is not a React component, and has been skipped

What this error means

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.

Typical symptoms

  • Error message during build or development: "The default export is not a React component"
  • Page fails to render in Next.js with a blank screen or error page
  • Fast Refresh stops working and requires full page reload
  • ESLint warning: "Fast refresh only works when a file only exports components"
  • Hot module replacement fails in development
  • Component state resets unexpectedly during development

Common causes

  1. Exporting a plain object, string, or other non-component value as default export
  2. Default export returns undefined or does not return JSX
  3. Exporting both React components and non-component values (contexts, constants, utilities) from the same file
  4. Importing and re-exporting a non-component as the default export
  5. Component function not starting with uppercase letter (React convention)
  6. Accidentally exporting a HOC (Higher-Order Component) call result incorrectly
  7. TypeScript or JavaScript module resolution issues causing wrong exports
  8. Circular dependencies preventing proper component export

How to fix "The default export is not a React component, and has been skipped"

1Verify the default export is a valid React component

Check that your default export is a function or class component that returns JSX:

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.

2Separate component and non-component exports

If you're exporting both components and non-component values, move them to separate files:

Before (causes Fast Refresh issues):

jsx
// MyComponent.jsx
export const MY_CONSTANT = 'value';
export const myContext = createContext();

export default function MyComponent() {
  return <div>Component</div>;
}

After (Fast Refresh compatible):

jsx
// 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.

3Check for correct component return statements

Ensure your component always returns JSX, even in conditional scenarios:

jsx
// ❌ 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;
}
4Fix Next.js page exports

For Next.js pages, ensure the default export is the page component, not getServerSideProps or other exports:

jsx
// ❌ 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:

jsx
// app/page.tsx
export default function Page() {
  return <div>Page content</div>;
}
5Check for import/export errors

Verify you're not accidentally importing or re-exporting non-components:

jsx
// ❌ 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.

Advanced notes

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):

js
// .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:

tsx
// ✅ 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:

jsx
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.

Frequently asked questions

What does "The default export is not a React component, and has been skipped" mean?
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. js throws this error because it cannot render the page. 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).
How do I fix "The default export is not a React component, and has been skipped"?
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.
What causes "The default export is not a React component, and has been skipped"?
Exporting a plain object, string, or other non-component value as default export Default export returns undefined or does not return JSX Exporting both React components and non-component values (contexts, constants, utilities) from the same file
Is the "The default export is not a React component, and has been skipped" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading