next.js Vercel构建类型错误:_.map不是函数

guykilcj  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(109)

尝试在vercel上部署next.js应用程序时遇到typeError

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)

字符串
我有一个组件SearchResults,它应该呈现使用getAll函数获取的练习项列表。

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();
}


我在本地测试了组件,一切正常。即使在本地使用“next build”命令构建项目时,也不会显示任何错误或警告。我很感激任何关于如何解决这个错误的见解或建议。- 谢谢-谢谢
我尝试的是:我尝试创建一个typescript接口,而不是使用prisma客户端类型。硬编码项目变量中的值似乎工作,但这不是我要找的。
我希望发生的事情:我希望构建过程能够成功完成。
实际结果是:TypeError:items.map不是一个函数

pqwbnv8z

pqwbnv8z1#

在Vercel环境中,process.env.CLIENT_URL很可能是undefined。在Vercel项目设置中仔细检查其值。另外,没有前缀为NEXT_CLIENT_的变量不会暴露在客户端,我相信这就是您现在正在使用的。最后,items没有导致items.map is not a function的值,您可能还需要为此添加一个检查。
我邀请您阅读有关NextJs环境变量的内容。

相关问题