Cannot access 'getSession' before initialization

[antonioOrtiz]

Hi there; First I want to say thanks for you blog post and this repo!

I followed your blogpost and repo but when I start my app and also when I try to login I get this error:

Response of status: 500,

Cannot access 'getSession' before initialization.

I suspect it's from

This is my repo

And this is the app up on vercel.

Thank you in advance!

[hoangvvo]

Can you paste the full log please? Or point out where that function is called.

One of the possible causes include circular dependencies (https://spin.atomicobject.com/2018/06/25/circular-dependencies-javascript/)

[antonioOrtiz]

This starts when a call I'm making to the swr at this route: /api/user

import nextConnect from 'next-connect'
import auth from '/middleware/auth'

const handler = nextConnect()

handler
  .use(auth)
  .get((req, res) => {
    console.log("req.user ", req.user);
    res.json({ user: req.user })
  })

export default handler

And this is the hook which is calling it:

import useSWR from 'swr';
import axios from 'axios';

export const fetcher = (...args) => axios(...args).then((res) => console.log('res', res)).catch((error) => {
  console.log("error.response ", error.response);
});


export function useCurrentUser() {
  const { data, mutate } = useSWR('/api/user', fetcher);
  const user = data?.user;
  return [user, { mutate }];
}

Essentially in my layout component I am using that hook which calls/api/user to see if the req.user has been set by passport thus creating the 'user' below.

export default function Layout({ children, showFooter = false }) {

  const [user, { mutate }] = useCurrentUser();

  async function handleLogout() {
    axios
      .get('/api/logout').then(() => {
        mutate({ user: null })
        Router.push('/',)
      }).catch(err => console.log('err', err))
  }

  return <>
    <div className="shadow bg-base-200 drawer h-screen">
          <div className="flex-none hidden lg:block">
            <ul className="menu horizontal">

              {user
                ?
                <>
                  <li>
                    <Link href="/profile">
                      <a>Profile</a>
                    </Link>
                  </li>
                  <li>
                    <Link href="/dashboard">
                      <a>Dashboard</a>
                    </Link>
                  </li>
                  <li>
                    <a role="button" onClick={handleLogout}>
                      Logout
                    </a>
                  </li>
                  <li className="avatar">
                    <div className="rounded-full w-10 h-10 m-1">
                      <img src="https://i.pravatar.cc/500?img=32" />
                    </div>
                  </li></>
                :
                <>
                  <li>
                    <Link href="/login">
                      <a>Login</a>
                    </Link>
                  </li>
                  <li>
                    <Link href="/registration">
                      <a>Register</a>
                    </Link>
                  </li>
                </>
              }
            </ul>
          </div>
        </div>
  </>;
}