Vercel 배포 에러 문의드립니다.

[김수현]

<ol>
<li>선생님 안녕하세요. 버셀에 배포중인데요. 에러가 낫는데 어떤 문제인지, 어떻게 해결해야 할지 도통 모르겠네요.ㅜㅜ

64)Errors (52)Warnings (0)
 
Expand 35 Lines
00:43:21Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
00:43:21 at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:74:493)
00:43:21 at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
00:43:21 at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:74:209)
00:43:21 at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
00:43:21 at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:74:209)
00:43:21 at Z (/vercel/path0/node</li>
</ol>

[codingapple]

에러원인 알려주는 메세지가 어딘가 있을걸요 로컬 프로젝트 실행시에도 에러없나 확인해봅시다

[김수현]

네 로컬 프로젝트 확인중인데요. 서버콘솔에 다음과 같은 경고가 떴는데 혹시 상관있을까요? 그리고 이 경고 메시지는 어떻게 해결할 수 있나요?

============================
Warning: Only plain objects can be passed to Client Components from Server Components. Objects with toJSON methods are not supported. Convert it manually to a simple value before passing it to props. 
  {_id: {}, title: "a", content: "bb"}  
        ^^

======================

아래는 해당 경고가 있는 ListItem.js 파일입니다.

======================

import { connectDB } from "@/util/database";
import Link from "next/link"
import ListItem from "./listItem";

export const dynamic = 'force-dynamic'
// export const revalidate = 10;

export default async function List() {

    const db = (await connectDB).db("forum")
    let result = await db.collection('post').find().toArray()
    return (
        <div className="list-bg">
            <ListItem result={result} />
            <Link href="/write">글작성하기</Link>
        </div >
    )
}

======================

아래는 ListItem.js 파일입니다.

======================

'use client'

import Link from "next/link";

export default function ListItem({ result }) {

    return (
        <div>
            {
                result.map((a, i) =>

                    <div className="list-item" key={i}>
                        <Link href={`/detail/${result[i]._id}`}>
                            <h4>{a.title}</h4>
                        </Link>
                        <Link href={`/edit/${result[i]._id}`}>✏️</Link>
                        <span onClick={(e) => {
                            fetch('/api/post/delete', {
                                method: 'DELETE',
                                body: result[i]._id
                            })
                                .then((r) => {
                                    return r.json()
                                })
                                .then((result) => {

                                    if (result.status == 200) {
                                        e.target.parentElement.style.opacity = 0
                                        setTimeout(() => {
                                            e.target.parentElement.style.display = 'none';
                                        }, 1000)
                                    } else { console.log(result) }
                                }).catch((error) => {
                                    console.log(error)
                                })
                        }}>🗑️</span>
                        <p>1월1일</p>
                    </div>
                )
            }
        </div >
    );
}

[codingapple]

result를 props로 보내기 전에 반복문돌려서 _id 속성에 들어있는 값들에 .toString() 붙여서 보내봅시다

[글쓴이]

글