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

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

[codingapple]

list.js 경로가 좀 이상한게 아닐까요

[쿠로로]

강의대로 list파일내에 page.js를 만들었는데 경로가 이상한가요?

[codingapple]

import List from './list/page' 는 list.js 파일 경로가 아닌듯요

[글쓴이]

글