Module not found: Can't resolve 'fs' after importing getServerSession

[Abdulberk]

Environment

I'm trying to use getServerSession method in my nextjs app since most users who had the same issue when trying to get profile data returned by session suggested me to go for getServerSession instead of just "getSession", so i just wanted to give it a go hoping it would work fine in this case, but now getting such weird error..

the error only pops out after importing getServerSession, i have to use that, otherwise, removing it and going only for getSession to render session on the client side will return null data, so i wont be able to render user profile data returned by session, checked many times similar questions as well but no luck, cant tell enough how crucial it is for me, any help is highly appreciated.
@balazsorban44

error:

error - ./node_modules/@mapbox/node-pre-gyp/lib/clean.js:8:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^\.\/.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./pages/api/auth/[...nextauth].js
./components/header/Top.js
./components/header/index.js
./pages/_app.js

here is my Top component where i want to show user data:

import { useState } from "react";
import styles from "./styles.module.scss";
import Link from "next/link";
import Image from "next/image";
import UserMenu from "./UserMenu";
import avatar from "../../public/avatar.png";
import { useSession, signIn, signOut, getSession } from "next-auth/react"
import { getServerSession } from "next-auth";
import { authOptions } from "../../pages/api/auth/[...nextauth]";


function Top() {

  const { data: session} = useSession();


  return (
    <> 
      <div className={styles.top}>
        <div className={styles.top__container}>
          <div></div>

          <ul className={styles.top__list}>
            <li className={styles.li}>

              
              <Image
                src="/heart.svg"
                width={20}
                height={20}
                alt="heart"
                className={styles.test}
              />
              <Link href="/profile/wishlist">
                <span>Wishlist</span>
              </Link>
            </li>

            <li className={styles.li}>
              <span className={styles.cart}>3</span>
              <Image src="/cart.svg" width={22} height={22} alt="cart" />

              <Link href="/cart">
                <span>Cart</span>
              </Link>
            </li>
               
              {session ? (
                <li className={styles.li}>
                  <div className={styles.flex}>
                    
                    <Image
                      src={session.user.image || avatar}
                      width={64}
                      height={64}
                      alt="avatar"
                    />
                    <span>{session.user.name}</span>
                  </div>
                </li>
              ) : (
                <li className={styles.li}>
                  <div className={styles.flex}>
                    <span>Account</span>
                  </div>
                </li>
              )}
              {userMenuVisible && <UserMenu session={session} />}
            </li>
          </ul>
        </div>
      </div>
    </>
  );
}

export default Top;

export async function getServerSideProps(context) {

  const session = await getServerSession(authOptions)

  return {
    props: {
      session,
    },
  };
}

Reproduction URL

https://github.com/Abdulberk/lunarshop

Describe the issue

getSession returns null data when using in getServerSideProps, so i switched to getServerSession instead and did the same as in the old one, with the thought of rendering session on the server side will just fix the issue, but now getting such weird error that i declared above

How to reproduce

just importing the getServerSession instead of just getSession will error out in the console, saying:

error - ./node_modules/@mapbox/node-pre-gyp/lib/clean.js:8:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^./.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./pages/api/auth/[...nextauth].js
./components/header/Top.js
./components/header/index.js
./pages/_app.js

Expected behavior

This should work fine, but no luck !

export async function getServerSideProps(context) {

  const session = await getServerSession(authOptions)

 
  return {
    props: {
      session,
    },
  };
}

[fidalgodev]

You need to pass context.req and context.res:

const session = await getServerSession(context.req, context.res, authOptions)

[alv002]

完全不行，在原本代码中我只需要传递authOptions参数就可以获得返回值，但是我给了req和res函数之后依然报错