I keep running into a typeError when I try to deploy my next.js application on Vercel
TypeError: items.map is not a function
at SearchResults (/vercel/path0/.next/server/app/exercises/page.js:568:29)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Error occurred prerendering page "/exercises". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: items.map is not a function
at SearchResults (/vercel/path0/.next/server/app/exercises/page.js:568:29)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
The issue lies within my component SearchResults, which should be rendering a list of exercise items fetched using the getAll function.
import React from "react";
import getAll from "@/lib/getAll";
import ResultItem from "./ResultItem";
import { Exercise } from "@prisma/client";
export default async function SearchResults() {
const items: Exercise[] = await getAll();
return (
<div>
<div>
{items.map((item: Exercise) => {
return (
<ResultItem
key={item.id}
id={item.id}
title={item.name}
image={item.image}
/>
);
})}
</div>
</div>
); }
export default async function getAll() {
const res = await fetch(`${process.env.CLIENT_URL}/api/exercises`);
if (!res.ok) return new Error("Failed to fetch data");
return res.json();
}
Testing the component locally has been successful. Even building the project using the 'next build' command locally did not show any errors or warnings. I am seeking insights and suggestions on how to fix this error. Thank you.
Here's what I've tried so far: I attempted to create a TypeScript interface instead of utilizing Prisma client types. It seemed like hard coding values in the items variable worked, but that is not the ideal solution for me.
Expected outcome: I anticipate that the build process will complete without any issues.
Actual result: TypeError: items.map is not a function