<SessionProvider> import is next-auth/react is not working

[MatD1]

Question 💬

I am trying to use the <SessionProivder> component in my _app.js however using the import from the Next Auth site I receive this error
Imgur First Error
If I then change the import from 'next-auth/react' to 'next-auth/client' I receive these two error
Imgur Second Error
Imgur Second Error

I don't understand what is wrong? How do I fix this?

How to reproduce ☕️

_app.js code

import Router from 'next/router';
import NProgress from 'nprogress'; //nprogress module
import 'nprogress/nprogress.css'; //styles of nprogress
import { ChakraProvider, theme } from "@chakra-ui/react";
import { SessionProvider } from "next-auth/client"
import Head from 'next/head'
import Layout from '../layout'

Router.events.on('routeChangeStart', () => NProgress.start()); Router.events.on('routeChangeComplete', () => NProgress.done()); Router.events.on('routeChangeError', () => NProgress.done());

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <ChakraProvider >
        <Component {...pageProps} />
      </ChakraProvider>
    </SessionProvider>
  )
}

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[balazsorban44]

make sure you use either v3 of v4. if you use v4:

https://next-auth.js.org/getting-started/upgrade-v4#verify-the-correct-version

[MatD1]

Just figured this out! Thank you. For some reason know tho im getting an error "session.user" is undefined? I may need to create another question

[balazsorban44]

make sure you give a read to the docs to avoid most common mistakes https://next-auth.js.org/getting-started/client#sessionprovider

[MatD1]

make sure you give a read to the docs to avoid most common mistakes https://next-auth.js.org/getting-started/client#sessionprovider

I've applied what is in the documentation and im still receiving the error, I've created a post hopefully I can get some help I am pulling my hair out lol

[AydinChavez]

you have:
import { SessionProvider } from "next-auth/client";

this changed in v4 beta to:
import { SessionProvider } from "next-auth/react";

also ensure that you (currently) import in package.json:
"next-auth": "4.0.0-beta.2"

[balazsorban44]

Right... 😅 . Usually, if I don't see a code snippet or at least a pasted-in image (prefer code snippet for searchability/accessibility) I just jump over external links. Thanks for chipping in 🙏

[AydinChavez]

no prob :-) you're welcome

[balazsorban44]

If using v4, make sure you read this https://next-auth.js.org/getting-started/upgrade-v4