reactjs - In Next.js the following error occurs during the build: Export encountered errors on following paths: page:- Stack Ove

admin2025-04-27  2

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.

转载请注明原文地址:http://anycun.com/QandA/1745709146a91131.html