TypeError: Cannot read properties of undefined (reading 'session') #4845
Labels
triage
Unseen or unconfirmed by a maintainer yet. Provide extra information in the meantime.
Comments
tszhong0411
added
the
triage
|
I'm getting the same error on when integrating
also, note how on the docs say to add types
|
|
I don't know what happened. 😢
|
|
I encountered the same error you are experiencing (shown above) when attempting to retrieve a color scheme cookie with the library Mantine. I was able to resolve this by first retrieving the initial props and then returning an object that combined them with my custom properties. import App from 'next/app'
import type { AppContext, AppProps } from 'next/app'
import { getSession } from 'next-auth/react'
// ...
export default function MyApp(props: AppProps) {
const {
Component,
pageProps: { session, ...pageProps },
} = props
// ...
}
MyApp.getInitialProps = async (context: AppContext) => {
const appProps = await App.getInitialProps(context)
const session = await getSession(context.ctx)
return {
...appProps,
session,
colorScheme: getCookie('mantine-color-scheme', context.ctx) || 'light',
}
}I'm not sure if it's intended that you should use |
|
|
|
This is expected. |
|
Hi there, In my current implementation, I'm using the latest version of NextJS and NextAuth So, I tried to add the NextAuth session in the import type { NextPage } from "next";
import type { AppProps } from "next/app";
import { ReactElement, ReactNode, useState } from "react";
import {
ColorScheme,
ColorSchemeProvider,
MantineProvider,
} from "@mantine/core";
import { SessionProvider } from "next-auth/react";
// install cookies-next package to manage cookies
import { getCookie, setCookie } from "cookies-next";
import { useColorScheme } from "@mantine/hooks";
// we're going to redefined
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode | null;
};
import { unstable_getServerSession } from "next-auth/next";
import { getSession } from "next-auth/react";
import { authOptions } from "pages/api/auth/[...nextauth]";
import App from "next/app";
type AppPropsWithLayout = AppProps<any> & {
Component: NextPageWithLayout;
};
/**
* Hello World!! This is the main app component.
*
* @param param0
* @returns
*/
export default function MyApp({
Component,
pageProps,
}: AppPropsWithLayout) {
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout ?? ((page) => page);
// hook will return either 'dark' or 'light' on client
// and always 'light' during ssr as window.matchMedia is not available
const preferredColorScheme = useColorScheme();
const [colorScheme, setColorScheme] =
useState<ColorScheme>(preferredColorScheme);
console.log("!!!!", { colorScheme, setColorScheme, preferredColorScheme });
const toggleColorScheme = (value?: ColorScheme) => {
const nextColorScheme =
value || (colorScheme === "dark" ? "light" : "dark");
setColorScheme(nextColorScheme);
// when color scheme is updated save it to cookie
setCookie("mantine-color-scheme", nextColorScheme, {
maxAge: 60 * 60 * 24 * 30,
});
};
return (
<ColorSchemeProvider
colorScheme={colorScheme}
toggleColorScheme={toggleColorScheme}
>
<MantineProvider
withGlobalStyles
withNormalizeCSS
theme={{ colorScheme }}
>
<SessionProvider session={pageProps.session} refetchInterval={0}>
{getLayout(<Component {...pageProps} />)}
</SessionProvider>
</MantineProvider>
</ColorSchemeProvider>
);
}
MyApp.getInitialProps = async (appContext: any) => {
// calls page's `getInitialProps` and fills `appProps.pageProps`
const appProps: any = await App.getInitialProps(appContext);
const colorScheme = getCookie("mantine-color-scheme", appContext) || "dark";
// check if we're in server side
if (typeof window === "undefined") {
// get session from server
const session = await unstable_getServerSession(
appContext.req,
appContext.res,
authOptions
);
return { ...appProps, pageProps: { session, colorScheme } };
}
// get session from client
const session = await getSession();
return { ...appProps, pageProps: { session, colorScheme } };
};running Do you have any clue? |
AbdBarho
pushed a commit
to LAION-AI/Open-Assistant
that referenced
this issue
Apr 28, 2023
#2946) see nextauthjs/next-auth#4845 Not sure it fixed or not, since I'm not able to reproduce the issue locally. Also this might effect the performance, just a bit I think
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Environment
Reproduction URL
https://stackblitz.com/edit/nextjs-wqk2hd
Describe the issue
When add the below to get the cookie for the dark mode function. The
sessionis not defined in thepageProps. I think I overrode something so makes this error.I also tried adding the below code, but it happens with another error.
Error:
How to reproduce
next-auth-examplerepository.pages/_app.tsxyarn devto start the server.Expected behavior
It should be no error.
The text was updated successfully, but these errors were encountered: