Body exceeded 1mb limit error in NextJS

[andrenagusch]

Provide environment information

  System:
    OS: macOS 12.5.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 233.28 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.7.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Firefox: 103.0.2
    Safari: 15.6.1
  npmPackages:
    @trpc/client: ^9.26.0 => 9.26.0 
    @trpc/next: ^9.26.0 => 9.26.0 
    @trpc/react: ^9.26.0 => 9.26.0 
    @trpc/server: ^9.26.0 => 9.26.0 
    next: 12.2.0 => 12.2.0 
    react: 18.2.0 => 18.2.0 
    react-query: ^3.39.2 => 3.39.2 

Describe the bug

I need to write/read larger PNG Base64 strings to the database (3x 1MB). It works as long as the total file size of all three images is less than 700 KB. When the images are larger I get this error:

TRPCClientError: Unexpected token < in JSON at position 0
    at Function.from (.../node_modules/@trpc/client/dist/TRPCClientError-bfee2bf5.cjs.dev.js:69:14)
    at .../node_modules/@trpc/client/links/httpBatchLink/dist/trpc-client-links-httpBatchLink.cjs.dev.js:208:50
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  originalError: SyntaxError: Unexpected token < in JSON at position 0
      at JSON.parse (<anonymous>)
      at Response.json (node:internal/deps/undici/undici:2291:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5),
  shape: undefined,
  data: undefined,
  isDone: false,
  [cause]: SyntaxError: Unexpected token < in JSON at position 0
      at JSON.parse (<anonymous>)
      at Response.json (node:internal/deps/undici/undici:2291:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
}

Just using prisma without trpc is working as well!
useMutation and useQuery without w+r images is also working.

To reproduce

// Generate Base64:

const convertBase64 = (file: any) => {
    return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file)
        fileReader.onload = async () => resolve(fileReader.result)
        fileReader.onerror = (error) => reject(error)
    })
}

export const handleFileRead = (Event: React.ChangeEvent<HTMLInputElement>) => {
    const { files } = Event.target;
    const file = files?.[0]

    return convertBase64(file)
}

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd be down to file a PR fixing this bug!

[jlalmes]

https://stackoverflow.com/questions/68574254/body-exceeded-1mb-limit-error-in-next-js-api-route

[andrenagusch]

I'm using

export const config = {
  api: {
      bodyParser: {
          sizeLimit: '100mb',
      },
      responseLimit: '100mb',
  }
}

[lobotomoe]

@andreaguasch Hi. Did you find solution?

[lobotomoe]

Never mind. I found that I should export config directly from [trpc].ts file (if you using recommended file structure).

export const config = {
    api: {
        bodyParser: {
            sizeLimit: '4mb'
        },
     responseLimit: '4mb'
  },
}

[MatteoGauthier]

Hey ! I'm having the same problem, so I've defined the required api route configuration in the [trpc] route, but I'd like to adjust this limit according to the routers and procedures. Has anyone ever done something like this?

[fahmidme]

For anybody else facing this issue, I was able to solve it using @lobotomoe's solution. My project structure was set up using t3 and the only change required is in src/pages/api/trpc/[trpc].ts]. Just add this (Change 4mb to whatever you want):

export const config = {
    api: {
        bodyParser: {
            sizeLimit: '4mb'
        },
     responseLimit: '4mb'
  },
}