Upload relationships with hasMany: true result in Unexpected end of JSON input upon opening the modal window

[hristokoev]

Link to reproduction

https://github.com/hlinoteka-dev/hlinoteka-payload *The upload relationship field can be found in the Products collection

Payload Version

v3.0.0-beta.94

Node Version

20.14.0

Next.js Version

15.0.0-canary.104

Describe the Bug

When I set a relationship to a media upload collection with hasMany: true and I click on + Create New, I get ERROR: Unexpected end of JSON input. The feature still works and I can upload images (one by one). I can still drag and drop multiple images as well, but this error keeps showing up in the terminal:

[03:03:04] ERROR: Unexpected end of JSON input
    err: {
      "type": "SyntaxError",
      "message": "Unexpected end of JSON input",
      "stack":
          SyntaxError: Unexpected end of JSON input
              at JSON.parse (<anonymous>)
              at parseJSONFromBytes (node:internal/deps/undici/undici:4306:19)
              at successSteps (node:internal/deps/undici/undici:4288:27)
              at fullyReadBody (node:internal/deps/undici/undici:2724:9)
              at process.processTicksAndRejections (node:internal/process/task_queues:95:5)   
              at async consumeBody (node:internal/deps/undici/undici:4297:7)
              at async addDataAndFileToRequest (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_rea_wkimyxb5os6fmjklmfzrzeiuhi/node_modules/@payloadcms/next/dist/utilities/addDataAndFileToRequest.js:25:16)
              at async eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_rea_wkimyxb5os6fmjklmfzrzeiuhi/node_modules/@payloadcms/next/dist/routes/rest/index.js:474:9)

Reproduction Steps

1. Fresh install of beta.94
2. Set up a new collection and put an upload relationship field:

{
    name: 'image',
    type: 'upload',
    relationTo: 'media',
    hasMany: true,
}

3. Go to the dashboard and click on + Create new.

Clicking on the + Choose from existing button doesn't result in this error.

Adapters and Plugins

No response

[hristokoev]

Just in case, sharing the thread on Discord with a video, displaying the error.

[hristokoev]

Hi, I've updated to the latest version (v3.0.0-beta.111) and this issue persists. My server log is full of these errors, which happen every time the modal window of the upload field is opened (Create New button).

Is there anything I can do?

Reproduction Steps

1. Install a new instance of the blank template using npx create-payload-app@beta
2. Select the blank template
3. Create a new collection and add the following field:

{
    name: 'image',
    type: 'upload',
    relationTo: 'media',
    hasMany: true,
}

4. Run Payload CMS and navigate to the new collection, create a new document and click on the Create New button for the image (upload) field

[ryancmcmanus]

I still am seeing this issue on 3.2.2

[cgilly2fast]

I have this error on 3.5

[FredPerr]

Make sure to use higher or lower node version than Node 23.2, that was the problem for me.

[jeromewtf]

Still get the error. Fresh installed example of Payloadcms Auth

[14:36:30] ERROR: Unexpected end of JSON input
    err: {
      "type": "SyntaxError",
      "message": "Unexpected end of JSON input",
      "stack":
          SyntaxError: Unexpected end of JSON input
              at JSON.parse (<anonymous>)
              at parseJSONFromBytes (node:internal/deps/undici/undici:5731:19)
              at successSteps (node:internal/deps/undici/undici:5712:27)
              at fullyReadBody (node:internal/deps/undici/undici:4609:9)
              at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
              at async consumeBody (node:internal/deps/undici/undici:5721:7)
              at async addDataAndFileToRequest (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/payload/dist/utilities/addDataAndFileToRequest.js:23:24)
              at async endpoint.handler (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/payload/dist/utilities/wrapInternalEndpoints.js:17:17)
              at async handleEndpoints (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/payload/dist/utilities/handleEndpoints.js:177:26)
              at async eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]__2rjhki3tvg5qksvqjfjdqrkzny/node_modules/@payloadcms/next/dist/routes/rest/index.js:27:20)
              at async AppRouteRouteModule.do (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:10:32847)
              at async AppRouteRouteModule.handle (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:10:39868)
              at async doRender (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:1452:42)
              at async responseGenerator (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:1822:28)
              at async DevServer.renderToResponseWithComponentsImpl (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:1832:28)
              at async DevServer.renderPageComponent (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:2259:24)
              at async DevServer.renderToResponseImpl (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:2297:32)
              at async DevServer.pipeImpl (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:959:25)
              at async NextNodeServer.handleCatchallRenderRequest (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/server/next-server.js:281:17)
              at async DevServer.handleRequestImpl (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:853:17)
              at async /Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/server/dev/next-dev-server.js:371:20
              at async Span.traceAsyncFn (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/trace/trace.js:153:20)
              at async DevServer.handleRequest (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/server/dev/next-dev-server.js:368:24)
              at async invokeRender (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/server/lib/router-server.js:230:21)
              at async handleRequest (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/server/lib/router-server.js:408:24)
              at async requestHandlerImpl (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/server/lib/router-server.js:432:13)
              at async Server.requestListener (/Users/jerome/code/auth20250125/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/server/lib/start-server.js:146:13)
    }

[asynchat]

I'm not sure what behavior triggered this error：

ERROR: Unexpected end of JSON input err: { "type": "SyntaxError", "message": "Unexpected end of JSON input", "stack": SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) at parseJSONFromBytes (node:internal/deps/undici/undici:4747:19) at successSteps (node:internal/deps/undici/undici:4718:27) at fullyReadBody (node:internal/deps/undici/undici:1433:9) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async specConsumeBody (node:internal/deps/undici/undici:4727:7) at async addDataAndFileToRequest (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/payload/dist/utilities/addDataAndFileToRequest.js:23:24) at async endpoint.handler (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/payload/dist/utilities/wrapInternalEndpoints.js:17:17) at async handleEndpoints (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/payload/dist/utilities/handleEndpoints.js:177:26) at async eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]__xkg2xiejrusi62cpi5mv6gu4ji/node_modules/@payloadcms/next/dist/routes/rest/index.js:27:20) at async AppRouteRouteModule.do (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:10:32847) at async AppRouteRouteModule.handle (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:10:39868) at async doRender (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:1452:42) at async responseGenerator (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:1822:28) at async DevServer.renderToResponseWithComponentsImpl (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:1832:28) at async DevServer.renderPageComponent (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:2259:24) at async DevServer.renderToResponseImpl (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:2297:32) at async DevServer.pipeImpl (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:959:25) at async NextNodeServer.handleCatchallRenderRequest (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/next-server.js:281:17) at async DevServer.handleRequestImpl (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:853:17) at async /node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/dev/next-dev-server.js:371:20 at async Span.traceAsyncFn (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/trace/trace.js:153:20) at async DevServer.handleRequest (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/dev/next-dev-server.js:368:24) at async invokeRender (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/lib/router-server.js:230:21) at async handleRequest (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/lib/router-server.js:408:24) at async requestHandlerImpl (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/lib/router-server.js:432:13) at async Server.requestListener (/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/lib/start-server.js:146:13) }

[Marantesss]

I found this thread for payload-3.0-demo (https://github.com/payloadcms/payload-3.0-demo/issues/77) with a similar error for the /logout route (which is what is happening to me).

I have the current setup:

• PayloadCMS:3.20.0
• NextJS: 15.1.0

I've noticed this happens when the Content-Type header is set and the request body is empty. So I've fixed that issue like so:

const isFormData = body instanceof FormData
const finalBody = isFormData
  ? body
  : !!body ? JSON.stringify(body) : undefined

const response = await fetch(fullUrl, {
  headers: {
    // only set Content-Type for non-FormData requests if there is a body
    ...(!finalBody || isFormData)
      ? {}
      : { 'Content-Type': 'application/json' },
    /* ... */
  },
  /* ... */
})

TL;DR: Empty bodied requests with Content-Type header triggers this issue.

[PatrikKozak]

Hey @hristokoev, @ryancmcmanus, @cgilly2fast, @FredPerr, @Marantesss, @jeromewtf - thanks for bringing this to our attention and for your patience here.

This issue has been resolved with this PR here.

And has been released in version 3.25.0! Going to close this now but if this error arises again, I will reopen.

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.