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