'Component' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<{}, any, any>' is not a valid JSX element

Question

• I am running "yarn build" and/or "npm run build" on a repository. (same error for both commands)
• I am trying to build and deploy this code to an AWS environment so right now I am simply trying to get past the errors that tell me "failed to compile"
• The error is pointing to only one point in the whole app. This line : getLayout(<Component {...pageProps} />)

Here is the full error;

Type error: 'Component' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<{}, any, any>' is not a valid JSX element.

                     <Loader />
                   ) : (
                     getLayout(<Component {...pageProps} />)
                                ^
                   )
                 }
               </AuthConsumer>

error Command failed with exit code 1.

I have read similar questions and posts about this "component cannot be used as a JSX component" and they have not helped me on my quest to move forward.

Versions: react, @types/react, @types/react-dom, all set to version 17.0.2

I have deleted the package-lock.json files and left only the yarn-lock.json files for now

What clue am I missing to solve this puzzle?

kind regards

Answer 1

The Issue is with Latest Version of @types/react:18.xx This may have been introduced to your project via some other packages' peer dependency.

If you have a .tsconfig file, Add following to compilerOptions:

"paths": {
      "react": [ "./node_modules/@types/react" ]
    },