How to fix Warning: <Component /> is not a <Component /> component in React

// ComponentA.js
export default function ComponentA() {
  return <div>A</div>;
}

// Correct import
import ComponentA from './ComponentA';

// Incorrect import (will import module object)
import { ComponentA } from './ComponentA'; // Wrong!

// ComponentB.js
export function ComponentB() {
  return <div>B</div>;
}

// Correct import
import { ComponentB } from './ComponentB';

// Incorrect import (will be undefined)
import ComponentB from './ComponentB'; // Wrong!

// MyComponent.js - WRONG
function MyComponent() {
  return <div>Hello</div>;
}
// Missing export!

// MyComponent.js - CORRECT
export default function MyComponent() {
  return <div>Hello</div>;
}

// Or as named export
export function MyComponent() {
  return <div>Hello</div>;
}

// Wrong - component might be undefined
import { NonExistentComponent } from './components';

function Wrapper() {
  return <Layout sidebar={NonExistentComponent} />; // undefined
}

import { Sidebar } from './components';

function Wrapper() {
  // Pass the component reference, not an instance
  return <Layout sidebar={Sidebar} />;
}

// In Layout component
function Layout({ sidebar: SidebarComponent }) {
  return (
    <div>
      <SidebarComponent /> {/* Render as component */}
    </div>
  );
}

import PropTypes from 'prop-types';

Layout.propTypes = {
  sidebar: PropTypes.elementType.isRequired,
};

// Wrong - importing synchronously
const LazyComponent = React.lazy(() => import('./Component'));

// Component must be default export
const LazyComponent = React.lazy(() => import('./Component'));

// Usage with Suspense
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

// If component is named export
const LazyComponent = React.lazy(() =>
  import('./Component').then(module => ({
    default: module.NamedComponent
  }))
);

# Install madge to detect circular dependencies
npm install --save-dev madge

# Check for circular dependencies
npx madge --circular src/

// Before (circular):
// ComponentA.js imports ComponentB
// ComponentB.js imports ComponentA

// After (fixed):
// Extract shared logic to a new file
// SharedUtils.js - contains shared code
// ComponentA.js imports SharedUtils
// ComponentB.js imports SharedUtils

// Instead of direct import, pass as prop
function ParentComponent() {
  return (
    <ComponentA childComponent={ComponentB} />
  );
}

// Use full relative paths
import Component from './Component'; // ✓
import Component from './Component.jsx'; // ✓
import Component from './components'; // Only if index.js exists

{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

# Create React App
rm -rf node_modules/.cache

# Next.js
rm -rf .next

# Vite
rm -rf node_modules/.vite

# Rebuild
npm install
npm run build