- 我正在运行" yarn build ";和/或npm run build"在存储库上。(两个命令的错误相同)
- 我正在尝试构建并将此代码部署到AWS环境中，所以现在我只是试图绕过告诉我"编译失败"的错误。
- 错误只指向整个应用程序中的一个点。这句话:getLayout (& lt;组件{…pageProps}/祝辞)
下面是完整的错误;
类型错误:'Component'不能用作JSX组件。它的元素类型是'ReactElement<any,>| Component<{}， any, any>'不是一个有效的JSX元素。
<Loader />
) : (
getLayout(<Component {...pageProps} />)
^
)
}
</AuthConsumer>
error命令失败，退出码1.
我读过类似的问题和帖子，关于这个组件不能用作JSX组件。他们也没有帮助我前进。
版本:反应,@types/反应,@types/react-dom,
我已经删除了包锁。Json文件，只留下yarn-lock。Json文件
我缺少什么线索来解开这个谜题?
亲切的问候
//////////////下面我将添加更多的代码现在给别人看
所以这个问题的解决方案是在我的tsconfig中添加这些代码行。
"paths": { "react": [ "./node_modules/@types/react" ] }
下面我将分享问题产生的完整代码。
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);问题是最新版本的@types/react:18.x.x这可能是通过其他包的对等依赖引入到项目中的。
如果你有一个.tsconfig文件，在compilerOptions中添加以下内容:
"paths": {
"react": [ "./node_modules/@types/react" ]
}