../../../node_modules/destroy/index.js:16:0 Module not found: Can't resolve 'fs'

I ran into this problem when am following this video tutorial until here: https://youtu.be/nGoSP3MBV2E?list=PLIZkq64ad9C4POK0E1fhCaxlxTXwr7wSh&t=11448. By adding the handleProfileInfoUpdate() function to a onSubmit form I ecounter this problem:

Here’s my source code:

"use client";
import { json } from "express";
import { useSession } from "next-auth/react";
import Image from "next/image";
import { redirect } from "next/navigation";
import { useState } from "react";

export default function ProfilePage() {
  const session = useSession();
  const [userName, setUserName] = useState(session?.data?.user?.name || "");

  const { status } = session;

  async function handleProfileInfoUpdate(ev) {
    ev.preventDefault();
    const response = await fetch("/api/profile/", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: userName }),
    });
  }

  if (status === "loading") {
    return "Loading....";
  }

  if (status === "unauthenticated") {
    return redirect("/login");
  }

  const userImage = session.data.user.image;

  return (
    <section className="mt-8">
      <h1 className="text-center text-primary mb-4">Profile</h1>
      <div className="max-w-md mx-auto ">
        <div className="flex gap-4 items-center">
          <div>
            <div className=" px-2 rounded-lg relative">
              <Image
                className="rounded-lg w-full h-full mb-1"
                src={userImage}
                width={259}
                height={250}
                alt={"avatar"}
              />

              <button type="button">Edit</button>
            </div>
          </div>
          <form className="grow" onSubmit={handleProfileInfoUpdate}>
            <input
              type="text"
              placeholder="Input First and Last name"
              value={userName}
              onChange={(ev) => setUserName(ev.target.value)}
            />
            <input
              type="email"
              disabled={true}
              value={session.data.user.email}
            />
            <button type="submit">Save</button>
          </form>
        </div>
      </div>
    </section>
  );
}

I have tried installing the fs by running this cmd line: npm i fs but it doesn’t work

>Solution :

You’re trying to import express, the backend web framework library, in your frontend code with

import { json } from "express";

which is then trying to require fs, the file system module. There is no file system in the browser, so that will fail. npm i fs will also not work, because fs is a built-in Node.js module.

As far as I can see you’re not using that import, though, so just get rid of that line.