..SyntaxError: Unexpected token in JSON at position 42
Answered
Oriental posted this in #help-forum
OrientalOP
The build is successful when running
I have narrowed the problem down to when I use firestore admin sdk on my api but can't figour out how can this be the case since the same exact revision got deployed a few days back and now its failing!
here is my code for this file:
npm run build however when trying to deploy or build using vercel it fails with the following error: ✓ Creating an optimized production build
✓ Compiled successfully
✓ Linting and checking validity of types
Collecting page data ..SyntaxError: Unexpected token
in JSON at position 42
at JSON.parse (<anonymous>)
at 690 (.../.next/server/app/api/shop/[shopId]/route.js:1:1276)
at __webpack_require__ (.../.next/server/webpack-runtime.js:1:145)
at 3768 (.../.next/server/app/api/shop/[shopId]/route.js:1:418)
at __webpack_require__ (.../.next/server/webpack-runtime.js:1:145)
at __webpack_exec__ (.../.next/server/app/api/shop/[shopId]/route.js:1:1627)
at .../.next/server/app/api/shop/[shopId]/route.js:1:1662
at __webpack_require__.X (.../.next/server/webpack-runtime.js:1:1623)
at .../.next/server/app/api/shop/[shopId]/route.js:1:1640
at Object.<anonymous> (.../.next/server/app/api/shop/[shopId]/route.js:1:1704)I have narrowed the problem down to when I use firestore admin sdk on my api but can't figour out how can this be the case since the same exact revision got deployed a few days back and now its failing!
here is my code for this file:
import db from "@/app/services/firebase";
import { NextRequest, NextResponse } from "next/server";
export async function GET(
request: NextRequest,
{ params }: { params: { shopId: string } }
) {
const shop = await db.collection("shops").doc(params.shopId).get();
if (!shop.exists) {
return NextResponse.json({}, { status: 404 });
}
const jobs = await db.collection("jobs").where("shop", "==", shop.ref).get();
if (jobs.empty) {
return new Response(null, { status: 204 });
} else {
return NextResponse.json(jobs.docs.map((d) => d.data()));
}
}10 Replies
OrientalOP
yes,
const ManageShop = async ({
params: { shopId },
}: {
params: { shopId: string };
}) => {
const response = await fetch(`${HOST}/api/shop/${shopId}`);
const jobs = (await response.json()) as Job[];
return (...)@Oriental yes,
ts
const ManageShop = async ({
params: { shopId },
}: {
params: { shopId: string };
}) => {
const response = await fetch(`${HOST}/api/shop/${shopId}`);
const jobs = (await response.json()) as Job[];
return (...)
the route handler is not available during the build. so the page is unable to fetch the data
@Oriental yes,
ts
const ManageShop = async ({
params: { shopId },
}: {
params: { shopId: string };
}) => {
const response = await fetch(`${HOST}/api/shop/${shopId}`);
const jobs = (await response.json()) as Job[];
return (...)
you should query the data in the server component instead
Answer
OrientalOP
I see, so if my page was a client component it would be okay but since its a server component I'm running into this issue?
@Oriental I see, so if my page was a client component it would be okay but since its a server component I'm running into this issue?
yes if its a client component, the fetch should happen when the page load
@Oriental I see, so if my page was a client component it would be okay but since its a server component I'm running into this issue?
or turn the page to dynamic instead of static, so next doesn't need to prerender it
OrientalOP
I see, got it. thank you for the help. this could have saved me the whole day.
@Ray or turn the page to dynamic instead of static, so next doesn't need to prerender it
but still, you should query it on the page instead, because that would make an extra request.
user > page > route handler > database
user > page > route handler > database