How to fix Component is not exported as default in React

Update the component file so it has a default export. For example:

// Export a default React component
export default function ProfileCard() {
  return <div>Profile</div>;
}

If the component already exists as a named declaration, re-export it as the default at the bottom of the file:

const ProfileCard = () => {
  return <div>Profile</div>;
};

export default ProfileCard;

Keep the component as a named export and change the import site to use destructuring:

// In ProfileCard.jsx
export const ProfileCard = () => <div>Profile</div>;

// In App.jsx
import { ProfileCard } from './ProfileCard';

Make sure the import path points directly to the file that exports the component rather than a barrel file that only re-exports named members.

Tools such as React.lazy, next/dynamic, and other code-splitting helpers always read module.default. If the source file exposes named exports, create a tiny wrapper that re-exports the named component as the default:

ProfileCardLazy.jsx

export { ProfileCard as default } from './ProfileCard';

Then keep the helper pointing at the wrapper:

const LazyProfile = lazy(() => import('./ProfileCardLazy'));

Double-check that TypeScript or bundler settings aren’t substituting a CommonJS module without a default export. Enabling esModuleInterop or allowSyntheticDefaultImports helps when importing CommonJS modules, but modules authored as ES modules should explicitly provide export default. Ensure Webpack/Next.js path aliases resolve to the correct file, not an index that lacks the default export.