React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

[soufianehamdach28]

[weyniis]

Had this same issue before. It usually happens when you're mixing up default and named exports.

If ur MainLayout component looks like this:

export const MainLayout = () => {
  return <div>Layout</div>;
};

Then make sure u're importing it like this:

import { MainLayout } from './MainLayout';

Don't do this if it's a named export:

import MainLayout from './MainLayout'; // this will cause the "got: object" error

OR if u're using default export:

const MainLayout = () => {
  return <div>Layout</div>;
};

export default MainLayout;

Then import it like this:

import MainLayout from './MainLayout';

Just double-check whether u're using export default or export const and make sure the import matches.

Hope this helps

[SanketPathare]

This error usually means that React is receiving an object where it expects a valid component type, such as a function, class, or HTML tag.

Here are some common causes and possible fixes:

1. Check default and named imports. Make sure the import matches how the component is exported.

   // Default export
   export default MyComponent;
   import MyComponent from './MyComponent';
   
   // Named export
   export { MyComponent };
   import { MyComponent } from './MyComponent';

2. Check third-party library imports. Some packages export components differently across versions. Verify the package documentation and installed version.

3. Inspect namespace imports. For example, import * as Components from './components' gives you a module object, not necessarily a component you can render directly. Use the specific exported component instead.

4. Check the actual value. Log the imported component and verify whether it is a function or a valid React component rather than a module object.

5. Review the stack trace. Identify the JSX element that triggers the error and inspect its import statement and export definition.

If the issue persists, please share the component's import statement, export code, package version, and the complete stack trace. That will help identify the exact cause.