Module not found: Can't resolve 'fs' - NextJS/NextAuth

Question

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.

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,
    },
  };
}

Answer 1

This fixed the issue for me:

Module not found: Can't resolve 'fs' in Next.js application

Then the next error lead me here:

https://github.com/getsentry/sentry-javascript/issues/6548#issuecomment-1354561931

simply added this to my next.config.mjs did the trick

    webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve = {
        ...config.resolve,
        fallback: {
          net: false,
          dns: false,
          tls: false,
          fs: false,
          request: false,
        },
      };
    }
    return config;
  },

Answer 2

If you are following the Nextjs tutorial you might come across this error.

Make sure your actions.ts file has the 'use server'; directive.

When it comes to creating the authenticate action you will notice the code example has no use server directive. But, it should, as described in chapter 12.

In my case, I created a new action file and forgot to add the 'use server'; directive. As the component using the authenticate action was set as a client component (login-form.tsx in the context of the Nextjs tutorial), all imported modules became part of the client bundle (see docs), resulting in the "browser" trying to use the fs, then throwing an error.