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
Smooth-billed AniOP
I get this error after upgrading to next@14.0.1:
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:
Route handler HOF:
Client code:
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;1 Reply
Smooth-billed AniOP
Solved.
You cannot fetch routehandlers inside RSC
You cannot fetch routehandlers inside RSC
Answer