form.parse is not working on production mode

[MZ071999]

I have a next.js application with this mechanism:

1. User uploads a video file
2. The back-end parses the file and returns the file path to the front-end
3. The front-end sets the filepath to a video state
4. The video state is sent to the backend (along with other data) and is uploaded to cloudinary

Everything is working as intended in the development mode. After deploying the app to vercel, I got a 413 error whenever I tried to upload video files larger than 4MB. It works fine with files smaller than that. I read that the limit for formidable is 200MB and the limit for vercel server is 5MB so I wonder what went wrong with this?

Error message:

864-91987335a717725c.js:1 POST https://crystal-deployment-phase-git-main-mz071999.vercel.app/api/video/path 413
Error: Request failed with status code 413
    at a.exports (864-91987335a717725c.js:1:7666)
    at a.exports (864-91987335a717725c.js:1:10095)
    at XMLHttpRequest.w (864-91987335a717725c.js:1:2121)

the front-end code:

const onVideoUpload = (event) => {
    let formData = new FormData();
    let size = parseFloat(event.target.files[0].size / 1024).toFixed(2);
    if (size > 100000) {
      setVideoValid(false);
      setVideoError("Video cannot exceed 100MB!");
    }
    if (size < 100000) {
      setVideoValid(true);
      setEnteredVideo(true);
      formData.append("video_picture", event.target.files[0]);
      axios
        .post("/api/video/path", formData)
        .then((res) => setVideo(res.data.video))
        .catch((err) => {
          console.log(err);
        });
    }
  };

back-end code api/video/path

import { IncomingForm } from "formidable";

export const config = {
  api: {
    bodyParser: false,
  },
};

const asyncParse = (req) =>
  new Promise((resolve, reject) => {
    const form = new IncomingForm();
    console.log(form);
    form.parse(req, (err, fields, files) => {
      if (err) return reject(err);
      resolve({ fields, files });
    });
  });

export default async function handler(req, res) {
  console.log("Receiving");
  if (req.method === "POST") {
    const result = await asyncParse(req);
    console.log("result is ", result);
    const videoStr = result.files.video_picture.filepath;
    res.status(200).send({ video: videoStr });
  }
}

[GrosSacASac]

An issue with your prod settings

[MZ071999]

what could be the issue? it works with files smaller than 4MB and the limit for vercel is 5MB so a 4MB file should've worked right?

[GrosSacASac]

If it works in dev mode then you should obviously contact vercel but not here