Mongodb – Next throws Module not found: Error: Can't resolve 'dns' when trying to access user session in getServerSideProps

I am working with next-auth. I’ve added the mongodb adapter, so users are created automatically in my DB, but I need to add more data on top of the basic data that is given from next-auth (name, email, avatar), so I’ve created a edit-profile page where users can add the information that is needed.

This page is a dynamic page of course, so I need to fetch the user’s object from the DB when the user wants to access this page. To do so, I am trying to access the session from getServerSideProps, so I could fetch the user object based on the email from the session.
If no user is found in the session, I want to redirect the user back to the home page.

My issue is that it keeps throwing the error I’ve mentioned: Module not found: Can't resolve 'dns'

I saw a similar issue from two years ago here and according to the correct answer, the issue arises when having server side imports or code in the getServerSideProps and not using it – but I don’t have that and I do use all the I wrote or imported.

Been trying to find more info on that issue but haven’t found any solutions.

This is my full code (it’s the edit component of the page. Rest of the page is Header and Footer which are shared across all pages and cause no issues):

import React, { useState } from "react";
import type { GetServerSideProps } from "next";
import CustomInput from "../shared/CustomInput";
import { getServerSession } from "next-auth/next";
import { authOptions } from "../../pages/api/auth/[...nextauth]";

function EditProfile() {
  const [user, setUser] = useState({ name: "" });

  return (
    <section className="section-width py-20">
      <h1 className="text-7xl font-fancy">שלום {user.name}</h1>
      <div className="grid grid-cols-2 mt-20">
        <div className="flex flex-col space-y-5">
          <h2 className="font-extrabold text-lg text-gray-400">Details</h2>
          <CustomInput
            type="text"
            label="Full Name"
            placeholder="Full Name"
            value={user.name}
            onChange={(name) => setUser({ ...user, name })}
          />
        </div>
      </div>
    </section>
  );
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const session = await getServerSession(context.req, context.res, authOptions);

  if (session?.user?.name) {
    return {
      props: {
        name: session.user.name,
      },
    };
  } else {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }
};

export default EditProfile;