'Component' cannot be used as a JSX component. Its element type 'ReactElement | 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

////////////// I will add more code now below for others to see

So the solution to this problem for me was adding these lines of code inside of my tsconfig.json file in compilerOptions...

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

Below I will share the full code where the problem was coming from.

import type { ReactElement, ReactNode } from 'react';

import type { NextPage } from 'next';
import type { AppProps } from 'next/app';
import Head from 'next/head';
import Router from 'next/router';
import nProgress from 'nprogress';
import 'nprogress/nprogress.css';
import ThemeProvider from 'src/theme/ThemeProvider';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider, EmotionCache } from '@emotion/react';
import createEmotionCache from 'src/createEmotionCache';
import { appWithTranslation } from 'next-i18next';
import { SidebarProvider } from 'src/contexts/SidebarContext';
import 'src/utils/chart';
import { Provider as ReduxProvider } from 'react-redux';
import { store } from 'src/store';
import Loader from 'src/components/Loader';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import useScrollTop from 'src/hooks/useScrollTop';
import { SnackbarProvider } from 'notistack';
import { AuthConsumer, AuthProvider } from 'src/contexts/JWTAuthContext';

const clientSideEmotionCache = createEmotionCache();

type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactNode;
};

interface MyAppProps extends AppProps {
  emotionCache?: EmotionCache;
  Component: NextPageWithLayout;
}

function MyApp(props: MyAppProps) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  const getLayout = Component.getLayout ?? ((page) => page);
  useScrollTop();

  Router.events.on('routeChangeStart', nProgress.start);
  Router.events.on('routeChangeError', nProgress.done);
  Router.events.on('routeChangeComplete', nProgress.done);

  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <title>Tokyo White NextJS Typescript Admin Dashboard</title>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
      </Head>
      <ReduxProvider store={store}>
        <SidebarProvider>
          <ThemeProvider>
            <LocalizationProvider dateAdapter={AdapterDateFns}>
              <AuthProvider>
                <SnackbarProvider
                  maxSnack={6}
                  anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'right'
                  }}
                >
                  <CssBaseline />
                  <AuthConsumer>
                    {(auth) =>
                      !auth.isInitialized ? (
                        <Loader />
                      ) : (
                        getLayout(<Component {...pageProps} />)
                      )
                    }
                  </AuthConsumer>
                </SnackbarProvider>
              </AuthProvider>
            </LocalizationProvider>
          </ThemeProvider>
        </SidebarProvider>
      </ReduxProvider>
    </CacheProvider>
  );
}

export default appWithTranslation(MyApp);

Please provide enough code so others can better understand or reproduce the problem. — Community, Jul 18 '22 at 08:41
Please share the code for `Component` as well as the `getLayout` one — Toni Bardina Comas, Jul 18 '22 at 14:56

RKataria · Accepted Answer · 2022-07-18T13:51:58.937

25

The Issue is with Latest Version of @types/react:18.x.x 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" ]
 }

edited Jul 18 '22 at 13:51

answered Jul 18 '22 at 08:33

RKataria

581
1
5
12

Thank you Rkataria that is the solution to my error. Now I am presented with a new error. It makes sense to me that the Latest Version of React is causing these issues, as I have read more about similar problems from other people. I will add to this question with more code for others to see. Let me know if you have further ideas. – Nathan Chaney Jul 19 '22 at 02:36
This is indeed the solution. Thanks – Mosia Thabo May 22 '23 at 15:49

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

1 Answers1

Linked