Nextjs redux-persist: So zeigen Sie eine Liste asynchroner Komponenten an ⇐ JavaScript

[Guest]

Was ich versuche:
Ich baue einen Webshop auf und bin gerade dabei, die Warenkorbseite zu erstellen. Hier möchte ich alle Produkte mit den Bestellmengen anzeigen, die bestellt werden sollen.
Mein Problem:
As Sobald ich eine Liste der asynchronen Komponenten (die Warenkorbelemente) rendere, erhalte ich die folgende Fehlermeldung:

Code: Select all

./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

Wo liegt meiner Meinung nach mein Problem:
Die Komponente „Basket“ rendert eine Liste asynchroner BasketItem< /code>s. Wenn man die BasketItems nicht asynchron macht, scheint das Problem gelöst zu sein. Dazu müsste ich jedoch alle Warenkorbdaten im Client speichern und den Status viel komplizierter gestalten. Das möchte ich vermeiden.

Code: Select all

// 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 }) => (

))}

);
}

Die Artikel im Warenkorb, die das Problem zu verursachen scheinen:

Code: Select all

// 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}
;
}

Umgebender Code:
Die Seite zeigt nur die Warenkorbkomponente:

Code: Select all

// src/app/basket/Page.tsx
import Basket from "@/app/winkelmandje/Basket";

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

Dies ist das Segment, in dem die Daten in diesem Format gespeichert sind: prods: { id: string; count: Zahl }[]:

Code: Select all

// 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;