During the Next.jsbuild, the following error occurs:
SyntaxError: Unexpected end of JSON input at JSON.parse(<anonymous>) at parseJSONFromBytes (node:internal/deps/undici/undici:4553:19) at successSteps (node:internal/deps/undici/undici:4527:27) at fullyReadBody (node:internal/deps/undici/undici:1307:9) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async specConsumeBody (node:internal/deps/undici/undici:4536:7) at async s (/Users/.next/server/app/page.js:1:4055) at async h (/Users/.next/server/chunks/921.js:2:76780) at async Object.f [as fn] (/Users/.next/server/chunks/921.js:2:77077) ✓ Generating static pages (11/11)
Export encountered errors on following paths: /page: /"
I'm not sure where the error is coming from. One thing for sure is that the build error disappears if I comment out the following part in the Feeds component.
const { data, hasNextPage, fetchNextPage } = useInfiniteQueryHook({
queryKey: ["posts", language, date, sorting, timePeriod],
queryFn: getPosts,
});
The following are parts of the code.
// Feeds.tsx
"use client";
export default function Feeds({ date }: { date: Date }) {
console.log(date);
const { sorting } = useSortingStore((state) => state);
const { language } = useLanguageStore((state) => state);
const { timePeriod } = useTimePeriodStore((state) => state);
const { data, hasNextPage, fetchNextPage } = useInfiniteQueryHook({
queryKey: ["posts", language, date, sorting, timePeriod],
queryFn: getPosts,
});
useScrollLoaer({ hasNextPage, fetchNextPage });
return (
// ...
)
}
// useInfiniteQueryHook
"use client";
const useInfiniteQueryHook = <T,>({
queryKey,
queryFn,
}: useInfiniteQueryHookProps<T>) => {
const {
data,
fetchNextPage,
isLoading,
hasNextPage,
isFetchingNextPage,
error,
isError,
} = useSuspenseInfiniteQuery({
queryKey,
queryFn: ({ queryKey, pageParam = "1" }) => {
return queryFn({
cursor: pageParam,
queryKey: queryKey[1] as string,
date: queryKey[2] as Date,
sorting: queryKey[3] as string,
timePeriod: (queryKey[4] as string) || "",
});
},
getNextPageParam: (lastPage) => {
return lastPage.nextCursor || undefined;
},
initialPageParam: "1",
});
useEffect(() => {
if (isError && error) {
alert(`Error: ${error.message}`);
}
}, [error, isError]);
return {
data,
isLoading,
hasNextPage,
fetchNextPage,
isFetchingNextPage,
};
};
export default useInfiniteQueryHook;
// getPosts
export const getPosts = async ({
cursor,
}: {
cursor: string;
}): Promise<InfiniteQueryResponse<PostTypes[]>> => {
const isoDate = new Date().toISOString();
const encodedDate = encodeURIComponent(isoDate);
return client<Promise<InfiniteQueryResponse<PostTypes[]>>>("/api/getPosts", {
params: {
cursor,
language: "whole",
date: encodedDate,
sorting: "recent",
timePeriod: "whole",
},
});
};
// /api/routes/getPosts.tsx
export async function GET(
request: Request
): Promise<NextResponse<InfiniteQueryResponse<PostTypes[]>>> {
const { searchParams } = new URL(request.url);
const session = await auth();
const useruuid = session?.user?.id;
const cursor = searchParams.get("cursor");
const sorting = searchParams.get("sorting") || "recent";
const language = searchParams.get("language") as string;
const dateString = searchParams.get("date");
const timePeriod = searchParams.get("timePeriod");
const date = dateString
? new Date(decodeURIComponent(dateString))
: new Date();
// ... codes
return NextResponse.json({
data: formattedPosts,
nextCursor,
totalPosts: countRows.totalPosts,
pageParams: cursor ? parseInt(cursor.split("_")[0]) : 1,
});
}
Github link to the complete code.