Next.js Discord

Discord Forum

SyntaxError: Unexpected end of JSON input - on POST APi Routes

Unanswered
Keyhole wasp posted this in #help-forum
Open in Discord
Keyhole waspOP
Full Error
SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:5472:19)
    at successSteps (node:internal/deps/undici/undici:5454:27)
    at consumeBody (node:internal/deps/undici/undici:5460:9)
    at NextRequest.json (node:internal/deps/undici/undici:5400:18)
    at POST (webpack-internal:///(rsc)/./app/api/draw/complete/route.ts:20:107)
    at D:\Projects\<project-folder>\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:55784
    at D:\Projects\<project-folder>\node_modules\next\dist\server\lib\trace\tracer.js:140:36
    at NoopContextManager.with (D:\Projects\<project-folder>\node_modules\@opentelemetry\api\build\src\context\NoopContextManager.js:25:19)
    at ContextAPI.with (D:\Projects\<project-folder>\node_modules\@opentelemetry\api\build\src\api\context.js:60:46)
    at NoopTracer.startActiveSpan (D:\Projects\<project-folder>\node_modules\@opentelemetry\api\build\src\trace\NoopTracer.js:65:31)
    at ProxyTracer.startActiveSpan (D:\Projects\<project-folder>\node_modules\@opentelemetry\api\build\src\trace\ProxyTracer.js:36:24)
    at D:\Projects\<project-folder>\node_modules\next\dist\server\lib\trace\tracer.js:122:103
    at NoopContextManager.with (D:\Projects\<project-folder>\node_modules\@opentelemetry\api\build\src\context\NoopContextManager.js:25:19)
    at ContextAPI.with (D:\Projects\<project-folder>\node_modules\@opentelemetry\api\build\src\api\context.js:60:46)


This error started happening when I upgraded to Next 14.2.14. The reason I updated was to see if it fixed the TypeError: Response body object should not be disturbed or locked error I was getting. There was a previous answer to use NextResponse instead of Response which I thought fixed it, but apparently not.

It happens on all the POST requests I have. Here are 2 example routes:
https://gist.github.com/pr1ntr/da7f195fb011ca0522ffcd56d11b0860

1 Reply

Keyhole waspOP
The plot thickens actually this only happens when the browser sends a request with fetch like in this useCallback
const getAnalysis = useCallback(
    async (startPoint) => {
      try {
        setIsProcessing(true)
        const payload = {
          startIndex: startPoint,
          endIndex: PathCreator.totalPoints - 1,
          distance,
          image: snapshot,
          usedFeatures: analyses.map((analysis) => analysis.id),
          usedNames: analyses.map((analysis) => analysis.title),
        }

        const response = await fetch(API.DRAW_ANALYZE, {
          method: 'POST',
          body: JSON.stringify(payload),
          headers: {
            'Content-Type': 'application/json',
          },
        })

        const json = await response.json()
        if (Array.isArray(json?.analyses)) {
          for (const item of json.analyses) {
            const trackFeature = trackFeatures[item.id]
            if (trackFeature) {
              const textPosition = PathCreator.getBestPlaceToPutText(item.start, item.end)
              const analysis = { ...item, ...trackFeature, textPosition }
              PathCreator.showTrackAnalysis(analysis)
              dispatchAnalyses({ type: ActionTypes.ADD_TIPS, payload: analysis })
            } else {
              console.warn('Unknown track feature:', item)
            }
          }
        }
      } catch (error) {
        console.error(error)
      }
    },
    [analyses, distance, snapshot],
  )