'Layout' cannot be used as a JSX component.

[nypam]

Hey there,

Thank you for the super tutorial. I'm new to NEXT so bear with me :-)

When running the app, I got the following error...

I first thought it was related to @types/react but I'm using version 18.0.26

Any idea what it might be?

Thank you in advance.

[jmarioste]

HI @nypam , I think this happens because the part highlighted in red does not return a JSX.Element which causes a conflict.

In my case, it looks like this:

Did you use this code when getting the component?

 const Layout = Layouts[Component.Layout] ?? ((page) => page);

If not, make sure all your layouts returns a JSX.Element. For example:

One good way to ensure this is to use a <React.Fragment> component to wrap the children:

...
const SomeLayout = (props: PropsWithChildren) => {
  return (
    <>
      {props.children}
    </>
  );
};