Module not found: Can't resolve 'fs' 에러에 관하여

[김도균]

선생님 안녕하세요 다름이 아니고 제가 회원기능 만들기 : OAuth + session방식 사용하기 에서 숙제를 마치고 추가적으로 게시물에 email과 
로그인 한 유저의 이메일이 같을때 삭제 버튼이 보이게끔 구현을 하기 위해서 
 
detailLink.js

'use client'

import {useRouter} from "next/navigation";
import {getServerSession} from "next-auth";
import {authOptions} from "@/pages/api/auth/[...nextauth]";
export default function DetailLink(props){
    let router = useRouter()
    let session = getServerSession(authOptions)
    return (
        <div>
            <button onClick={() => {router.push(`/update?id=${props.obId._id}`)}}>수정</button>
            { (session.user.email === props.obId.email) ?
            <button onClick={(e) => {
                fetch('/api/server', {
                    method : "DELETE",
                    body : JSON.stringify({deleteId: props.obId._id})
                }).then((r) =>{
                    if(r.status === 200){
                        return r.json()
                    }
                } ).then(()=>{
                    e.target.parentElement.parentElement.style.opacity = 0;
                    setTimeout(()=>{
                        e.target.parentElement.parentElement.style.display = "none";
                    }, 1000)

                })
            }}>삭제</button> :  null
            }
        </div>

)
listClient.js

'use client'

import Link from "next/link";
import DetailLink from "@/app/list/detailLink";

export default function ListClient({result}){

return (
        <div>
            {
                result.map((a, i)=> {
                    return <div className="list-item" key={i}>
                        <a href={`/detail/${result[i]._id}`}>
                            <h4>{result[i].title}</h4>
                        
                        <p>{result[i].content}</p>
                        <p style={{display:"none"}}>{result[i]._id}</p>
                        <DetailLink obId={result[i]}/>
                    </div>
                })
            }
        </div>
    )
}

page.js

import {connectDB} from "@/util/database";
import Link from "next/link";
import DetailLink from "@/app/list/detailLink";
import ListClient from "@/app/list/ListClient";

export const dynamic = 'force-dynamic'

export default async function List(props){
    const client = await connectDB()
    const db = client.db("nx")
    let result = await db.collection("post").find().toArray()
    console.log(props)

    return (<div className="list-bg">
            <ListClient result={result}/>
    </div>)
}

를 위와 같이 구현을 했습니다

그런데 콘솔창을 확인하니 /list를 컴파일 하는 과정에서 Module not found: Can't resolve 'fs' 해당 애러가 발생하였습니다

그래서 무한 구글링 결과 next.config.mjs와 webpack.config.js 파일 생성후 설정 변경등 여러가지 방법을 진행하였지만 애러가 변하지를 않더라구요

혹시 위에 코드에서 위 애러와 관련한 문제가 발생할 이유가 따로 있을까요?? 그 부분이 조금 궁금합니다

[김도균]

추가: 다음 진도를 위해 위에 바꾼 코드를 원상 복구 시켰는데도 같은 애러 반복되고 있습니다

[codingapple]

'use client'에서 getServerSession 같은거 못씁니다 useSession이었나 써야합니다

[김도균]

넵 감사합니다 userSession 사용하여 해결하였습니다

[글쓴이]

글