Nextjs redux-persist: как показать список асинхронных компонентов ⇐ Javascript

[Anonymous]

Что я пытаюсь сделать:
Я создаю интернет-магазин и занимаюсь созданием страницы корзины покупок. Здесь я хочу показать все товары с указанием количества, которое будет заказано.
Моя проблема:
Как как только я отображаю список асинхронных компонентов (элементов корзины), я получаю следующую ошибку:
./node_modules/mongodb/lib/client-side-encryption/mongocryptd_manager.js:38:27

Module not found: Can't resolve 'child_process'
36 | const cmdName = this.spawnPath || 'mongocryptd';
37 | // eslint-disable-next-line @typescript-eslint/no-require-imports
> 38 | const { spawn } = require('child_process');
| ^^^^^^^^^^^^^^^^^^^^^^^^
39 | // Spawned with stdio: ignore and detached: true
40 | // to ensure child can outlive parent.
41 | this._child = spawn(cmdName, this.spawnArgs, {

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

В чем, по моему мнению, заключается моя проблема:
Компонент Basket отображает список асинхронных BasketItem< /код>с. Кажется, что устранение асинхронности BasketItem решает проблему. Однако для этого мне пришлось бы хранить все данные корзин в клиенте и значительно усложнить состояние. Мне бы хотелось этого избежать.
// src/app/basket/Basket.tsx
"use client";
import { useAppSelector } from "@/lib/hooks";
import BasketItem from "./BasketItem";

export default function Basket() {
const basket = useAppSelector((state) => state.basket);

return (

{basket.prods.map(({ id, count }) => (

))}

);
}

Товары в корзине, которые, по-видимому, вызывают проблему:
// src/app/basket/BasketItem.tsx
import getProductById from "@/database/api/product/getProductById";
import Product from "@/database/models/Product";
import { CircularProgress } from "@mui/material";

export default async function BasketItem(props: { productId: string; count: number }) {
const product: Product | undefined = await getProductById(props.productId);

return !product ? : {(product?.price ?? 0) * props.count}
;
}


Окружающий код:
На странице отображается только компонент «Корзина»:
// src/app/basket/Page.tsx
import Basket from "@/app/winkelmandje/Basket";

export default function Page() {
console.log("render page");
return ();
}

Это фрагмент, в котором хранятся данные в следующем формате: prods: { id: string; count: число }[]:
// src/lib/basket/basketslice.ts
import { createSlice } from "@reduxjs/toolkit";

export interface IBasketState {
prods: { id: string; count: number }[];
}

const initialState: IBasketState = {
prods: [],
};

export const basketSlice = createSlice({
name: "basket",
initialState: initialState,
reducers: {
addProduct: (state, action) => {
const id = action.payload;
if (!state.prods.find((obj) => obj.id == id)) {
state.prods.push({ id, count: 1 });
} else {
const index = state.prods.map((e) => e.id).indexOf(id);
state.prods[index] = { id, count: state.prods[index].count + 1 };
}
},
},
});

export const { addProduct } = basketSlice.actions;
export const basketReducer = basketSlice.reducer;


Подробнее здесь: https://stackoverflow.com/questions/793 ... components