How to fix Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object in React

// Correct
import MyComponent from './MyComponent';

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

// Wrong - will be undefined
import MyComponent from './MyComponent';

// MyComponent.jsx - exports as default
export default function MyComponent() {
  return <div>Hello</div>;
}

// App.jsx - wrong import syntax
import { MyComponent } from './MyComponent'; // ERROR

// MyComponent.jsx - exports as named
export function MyComponent() {
  return <div>Hello</div>;
}

// App.jsx - wrong import syntax
import MyComponent from './MyComponent'; // ERROR

// Wrong - typo in filename
import Button from './components/Botton'; // File is actually Button.jsx

// Correct
import Button from './components/Button';

const MyComponent = <div>Hello</div>; // This is JSX, not a component

function App() {
  return <MyComponent />; // ERROR - MyComponent is not a function
}

function MyComponent() {
  return <div>Hello</div>;
}

function App() {
  return <MyComponent />;
}

import MyComponent from './MyComponent';

console.log('MyComponent value:', MyComponent); // Check if undefined or an object

function App() {
  return <MyComponent />;
}

// A.jsx
import B from './B';

export default function A() {
  return <B />;
}

// B.jsx
import A from './A'; // Circular!

export default function B() {
  return <A />;
}

// Shared.jsx
export function sharedLogic() { }

// A.jsx
import B from './B';
import { sharedLogic } from './Shared';

// B.jsx
import { sharedLogic } from './Shared'; // No circular dependency