props를통해 app의 page.js에서 list파일내 list.js에 변수 전달

우선 app의 page.js는 이렇습니다.
제가 갖고있는 json 데이터 파일을 mongodb에 넣고 그걸 불러오기위해 변수저장을 해보았습니다.
우선 ptitle(상품명)과 iURL(이미지파일이 있는 인터넷 주소) 2개만 전달해보려합니다.

import List from './list/page';
import { connectDB } from './DB.js';
export default async function Home() {
  let client = await connectDB;
  const db = client.db('forum');
  let pid = await db.collection('post').find({}, { ProductID: 1, _id: 0 }).toArray();
  let category = await db.collection('post').find({}, { Category: 1, _id: 0 }).toArray();
  let gender = await db.collection('post').find({}, { Gender: 1, _id: 0 }).toArray();
  let ptitle = await db.collection('post').find({}, { ProductTitle: 1, _id: 0 }).toArray();
  let iURL = await db.collection('post').find({}, { ImageURL: 1, _id: 0 }).toArray();

   return (
    <main>
      <List ptitle={ptitle} iURL={iURL} />
      {console.log(ptitle)};
      <h1 className="title">Fahsion mall</h1>
      <p className="title-sub">by dev Shin</p>
    </main>
  )

그리고 list파일내에 list.js는 이렇습니다.

import { useState } from 'react'
export default function List(props) {
  const {ptitle, iURL} = props;
  let [수량, 수량변경] = useState([])

  return (
       <div>
        <h2 className="title">Products</h2>
        {
            ptitle.map( (goods, i)=> {
                return (
                  <div className="food" key={i}>
                        < img src={`${iURL[i]}`} className="food-img"/>
                    <h4>{goods} $10</h4>
                    <button onClick={()=>{
                      let copym = [...수량]
                      copym[i]--
                      수량변경(copym)}}>-</button>
                    <span>{수량[i]}</span>
                    <button onClick={()=>{ 
                      let copyp = [...수량]
                      copyp[i]++
                      수량변경(copyp)}}>+</button>
                  </div>
                )
            })
        }
      </div>
    )
  }

그런데 

./node_modules/mongodb/lib/client-side-encryption/mongocryptd_manager.js:34:24
Module not found: Can't resolve 'child_process'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/mongodb/lib/client-side-encryption/auto_encrypter.js
./node_modules/mongodb/lib/index.js
./app/DB.js
./app/page.js
./app/list/page.js

이렇게 에러가 뜨네요. 
해결방법이 없을까요?