Ошибка: Невозможно прочитать свойства неопределенного (чтение 'session')
Я создаю веб-приложение, использую Next.js для фронт-энда и Django для бэк-энда. Я делаю домашнюю страницу, которая перенаправляет на ваш профиль, если вы вошли в систему, и отображает диалог входа, если вы не вошли. Я столкнулся с такой ошибкой:
Error: Cannot read properties of undefined (reading 'session')
Вот полный текст ошибки:
src\app\layout.tsx (9:53) @ session
⨯ TypeError: Cannot read properties of undefined (reading 'session')
at App (./src/app/layout.tsx:17:40)
at stringify (<anonymous>)
digest: "2784612708"
7 | export const theme = extendTheme({});
8 |
> 9 | export default function App({Component, pageProps: {session, ...pageProps}}: AppProps) {
| ^
10 | return (
11 | <SessionProvider session={session}>
12 | <ChakraProvider theme={theme}>
⨯ src\app\layout.tsx (9:53) @ session
⨯ TypeError: Cannot read properties of undefined (reading 'session')
at App (./src/app/layout.tsx:17:40)
at stringify (<anonymous>)
digest: "2784612708"
7 | export const theme = extendTheme({});
8 |
> 9 | export default function App({Component, pageProps: {session, ...pageProps}}: AppProps) {
| ^
10 | return (
11 | <SessionProvider session={session}>
12 | <ChakraProvider theme={theme}>
GET / 404 in 1684ms
Вот моя layout.tsx
// pages/_app.tsx
import type {AppProps} from "next/app";
import {SessionProvider} from "next-auth/react";
import {ChakraProvider, extendTheme} from "@chakra-ui/react";
export const theme = extendTheme({});
export default function App({Component, pageProps: {session, ...pageProps}}: AppProps) {
return (
<SessionProvider session={session}>
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
</SessionProvider>
);
}
Вот моя index.tsx
// pages/index.tsx
import {useRouter} from "next/router";
import {signIn, useSession} from "next-auth/react";
import {Box, Button, Spinner, Text, VStack} from "@chakra-ui/react";
export default function Home() {
const router = useRouter();
const {data: session, status} = useSession();
if (status == "loading") {
return <Spinner size="lg"/>;
}
// If the user is authenticated redirect to `/profile`
if (session) {
router.push("profile");
return;
}
return (
<Box m={8}>
<VStack>
<Text>You are not authenticated.</Text>
<Button
colorScheme="blue"
onClick={() => signIn(undefined, {callbackUrl: "/profile"})}
>
Sign in
</Button>
</VStack>
</Box>
);
}
Кто-нибудь знает, что происходит?