React (and bundlers that target it) throws this error when you import a component as a default export but the module only exposes named exports. Align the import/export style or re-export the named symbol as the default so React actually receives the component it expects.
React components are just modules, and a default import (`import Component from './Component'`) assumes the module exposes a default export containing the React element definition. When the module only has named exports (for example `export function Component()` or `export const Component = ...`), the default import resolves to `undefined`, and React reports that the component is not exported as default. The error can also surface when using bundler helpers like `React.lazy`, `next/dynamic`, or suspense wrappers because they grab `.default` from the imported module. Without a proper default export, the loader cannot locate the component and the UI fails to render.
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.
If you need to keep several named exports for testing or reusability, keep a dedicated default re-export that points to the primary component. Next.js app/ routes and React Server Components assume default exports, so missing them can surface as errors in the server logs even before the client bundle loads. Where you cannot change the original module (e.g., a dependency), wrap it in a tiny module that does export { Component as default } from 'dependency'; so that React receives the default it expects.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite