1

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,
    },
  };
}
berk
  • 37
  • 7

1 Answers1

0

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;
  },
Smooth1884
  • 1
  • 1
  • 1