Next.js Discord

Discord Forum

Undici: SyntaxError: Unexpected token p in JSON at position 4 after upgrading from `Next v13.4.19 to

Answered
Smooth-billed Ani posted this in #help-forum
Open in Discord
Smooth-billed AniOP
I get this error after upgrading to next@14.0.1:

SyntaxError: Unexpected token p in JSON at position 4    at JSON.parse (<anonymous>)    
at parseJSONFromBytes (node:internal/deps/undici/undici:6662:19)    
at successSteps (node:internal/deps/undici/undici:6636:27) 
at node:internal/deps/undici/undici:1236:60    
at node:internal/process/task_queues:140:7    
at AsyncResource.runInAsyncScope (node:async_hooks:203:9) 
at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)    
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {  digest: '1318049504'}

The route handler implementation works in 13.4.19 but not in 14.0.1. Has anything changed? I have seen some changes regarding uncidi.

Route handler:
const { GET } = withRouteHandlerMiddleware({
  GET: async () => {
    const resp = await fetch(FOOTER_LINKS);

    const payload = await resp.json?.();

    if (!resp.ok) {
      throw payload;
    }

    return NextResponse.json(payload, {
      status: resp.status,
      statusText: resp.statusText,
    });
  },
});

export { GET };


Route handler HOF:
const applyMiddleware =
 (handler) =>
  async (req, params) => {
    try {
      const result = await handler(req, params);
      return result;
    } catch (error) {
      console.error({ status: (error as any)?.status, url: req?.nextUrl?.href });
    }
  };
export const withRouteHandlerMiddleware = (handlers) =>
  Object.entries(handlers).reduce(
    (acc, [method, handler]) => ({
      [method]: applyMiddleware(handler),
      ...acc,
    }),
    {}
  );

Client code:
  const resp = await fetch(routeHandlerURL);
  const payload =
    await resp.json?.();
  return payload;
Answered by Smooth-billed Ani
Solved.
You cannot fetch routehandlers inside RSC
View full answer

1 Reply

Smooth-billed AniOP
Solved.
You cannot fetch routehandlers inside RSC
Answer