-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TypeError: Cannot read properties of undefined (reading 'session') #4845
Comments
I'm getting the same error on when integrating also, note how on the docs say to add types |
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? |
#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
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
session
is 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-example
repository.pages/_app.tsx
yarn dev
to start the server.Expected behavior
It should be no error.
The text was updated successfully, but these errors were encountered: