嗨,我是编码新手,并尝试使待办事项应用程序。
但在vercel中构建时遇到错误。
它在开发环境中运行良好。
使用Next13、typscript、prisma、PostgreSQL、铁路、顺风
错误码
SyntaxError: Unexpected token T in JSON at position 0
at JSON.parse (<anonymous>)
at Response.json (node:internal/deps/undici/undici:6160:23)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Home (/vercel/path0/.next/server/app/page.js:478:18)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
SyntaxError: Unexpected token T in JSON at position 0
at JSON.parse (<anonymous>)
at Response.json (node:internal/deps/undici/undici:6160:23)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Home (/vercel/path0/.next/server/app/page.js:478:18)
info - Generating static pages (3/3)
> Build error occurred
Error: Export encountered errors on following paths:
/page: /
at /vercel/path0/node_modules/next/dist/export/index.js:415:19
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
at async /vercel/path0/node_modules/next/dist/build/index.js:1400:21
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
at async /vercel/path0/node_modules/next/dist/build/index.js:1259:17
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
at async Object.build [as default] (/vercel/path0/node_modules/next/dist/build/index.js:66:29)
Error: Command "npm run build" exited with 1
page.tsx
import PostForm from "../components/PostForm";
import Tasks from "../components/Tasks";
async function getPosts() {
const res = await fetch(`${process.env.BASE_URL}/api/getPosts`);
if (!res.ok) {
console.log(res);
}
return res.json();
}
export default async function Home() {
const data: {
id: number;
title: string;
content: string;
timestamp: string;
}[] = await getPosts();
return (
<div>
<PostForm />
<div className="sm:flex sm:justify-center sm:items-baseline sm:flex-wrap max-w-7xl mx-auto mt-7">
{data.reverse().map((post) => (
<Tasks
title={post.title}
content={post.content}
id={post.id}
timestamp={post.timestamp}
/>
))}{" "}
</div>
</div>
);
}
程序包-json
{
"name": "testapp-next13-tailwind-prisma-postgresql-typescript",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@next/font": "13.1.6",
"@prisma/client": "^4.9.0",
"@types/react": "18.0.27",
"@types/react-dom": "18.0.10",
"next": "13.1.6",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@types/node": "^18.11.19",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"prisma": "^4.9.0",
"tailwindcss": "^3.2.4",
"ts-node": "^10.9.1",
"typescript": "^4.9.5"
}
}
您可以在此处看到存储库https://github.com/satoshi02198/Task-maker
我很感激你的帮助。先谢了。
将page.tsx中的代码更改为客户端组件,使用useEffect获取数据,而不是服务器端呈现。(您可以在page.tsx的存储库中看到umcoment代码,但该代码也无法部署)我还检查了vercel BASE_URL中的环境变量设置,将其设置为https://task-maker-3.vercel.app(vercel尝试部署到的位置),并检查了PostgreSQL的DATABASE_URL
我编辑页面. tsx到这个语法错误似乎解决,但新的错误来了
async function getPosts() {
const res = await fetch(`${process.env.BASE_URL}/api/getPosts`);
if (!res.ok) {
console.log(res.json());
}
return res.text();
}
export default async function Home() {
const data = await getPosts();
const jsonData = JSON.parse(data);
console.log(jsonData);
return (
<div>
<PostForm />
<div className="sm:flex sm:justify-center sm:items-baseline sm:flex-wrap max-w-7xl mx-auto mt-7">
{jsonData
.reverse()
.map(
(post: {
title: string;
content: string;
id: number;
timestamp: string;
}) => (
<Tasks
title={post.title}
content={post.content}
id={post.id}
timestamp={post.timestamp}
/>
)
)}{" "}
</div>
</div>
);
}
和Vercel新错误
TypeError: The body has already been consumed.
at consumeBody (node:internal/deps/undici/undici:6072:19)
at consumeBody.next (<anonymous>)
at Response.text (node:internal/deps/undici/undici:6146:28)
at getPosts (/vercel/path0/.next/server/app/page.js:457:16)
at process.processTicksAndRejections (
node:internal/process/task_queues:95:5)
at async Home (/vercel/path0/.next/server/app/page.js:460:18)
Error occurred prerendering page "/". Read more:
https://nextjs.org/docs/messages/prerender-error
TypeError: The body has already been consumed.
at consumeBody (node:internal/deps/undici/undici:6072:19)
at consumeBody.next (<anonymous>)
at Response.text (node:internal/deps/undici/undici:6146:28)
at getPosts (/vercel/path0/.next/server/app/page.js:457:16)
at process.processTicksAndRejections
(node:internal/process/task_queues:95:5)
at async Home (/vercel/path0/.next/server/app/page.js:460:18)
info - Generating static pages (3/3)
> Build error occurred
Error: Export encountered errors on following paths:
/page: /
at /vercel/path0/node_modules/next/dist/export/index.js:415:19
at process.processTicksAndRejections
(node:internal/process/task_queues:95:5)
at async Span.traceAsyncFn
(/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
at async /vercel/path0/node_modules/next/dist/build/index.js:1400:21
at async Span.traceAsyncFn
(/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
at async /vercel/path0/node_modules/next/dist/build/index.js:1259:17
at async Span.traceAsyncFn
(/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
at async Object.build [as default]
(/vercel/path0/node_modules/next/dist/build/index.js:66:29)
Error: Command "npm run build" exited with 1
1条答案
按热度按时间8yparm6h1#
这是因为fetch返回的数据或错误不是有效的JSON对象。
因此,代替:
执行:
然后,您可以在执行错误检查之后执行JSON.parse。