Next.js项目Build时Component无法作为JSX组件的错误解决

问题场景 #

执行yarn build或npm run build编译用于AWS部署的Next.js项目时，编译失败，错误仅指向代码中getLayout(<Component {...pageProps} />)行，具体错误信息如下：

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

项目环境：

• react、@types/react、@types/react-dom版本均为17.0.2
• 已删除package-lock.json，仅保留yarn-lock.json
• 尝试过同类问题常规解决方案但无效

解决方案 #

在项目根目录的tsconfig.json文件中，找到compilerOptions配置项，添加paths字段，强制TypeScript使用项目本地的@types/react类型定义：

{
  "compilerOptions": {
    // 保留原有其他配置
    "paths": {
      "react": [ "./node_modules/@types/react" ]
    }
  }
}

相关代码（_app.tsx） #

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);

内容的提问来源于stack exchange，提问作者Nathan Chaney