Using multipart/form-data with multer occasionally causes React app to crash and refresh

Hi, I’m having a very strange bug in my code that I can not understand.

Something simply goes wrong when I use a multipart upload fetch request. It is not a problem when uploading JSON data. When I am using multer in the middle of my action chain, my entire app occasionally crashes and refreshes, resetting user auth token and everything. I think something is wrong with the fetch request itself. It will occasionally return with no status code, and the API simply hang and not proceed to further middleware.

I had trouble using the cross-fetch polyfill for formatting multipart/form-data requests AT ALL, as it would give me an invalid BodyInit error (This went away as soon as I stopped using the polyfill…)

I have tried splitting my requests from a single endpoint which uploads user info and an image at the same time, to a chain of requests which upload JSON (success), proceed to image upload and return file path of new image (occasional success, sometimes resets and refreshes entire app), and update entry with file path JSON (PUT request, again - it never happens if there is a hang / refresh)

I am really out of ideas. The code should be correct, and works when I take out the image uploading. I am thinking of trying out different form-data libs. The fact that it would not send at all until I got rid of a fetch polyfill is extremely confusing.

Here is a gist of my code:

https://gist.github.com/Mikhail-MM/5c843ef8c77cf6d534c09f536ab0c06a

[Mikhail-MM]

@devserkan Hey, I had forgotten this issue out of frustration but saw your comment a while back and had an a-ha moment … I think you are correct, this is intended behavior of the hot-reloader when it detects that a new file has been entered into the project. I’ve noticed the same refreshing when I have added photos manually to an open React project that I am working on. I think the issue is the refresh occurring in the middle of a fetch() call which never really resolves properly, giving this error, and producing an inconsistency on whether the backend server successfully pushes that file through and does all necessary logics. Somewhat shamefully I haven’t actually tried to disable hot-reloader or even run the app in prod mode, but I believe that this issue may be solved when hot reloader is not in play as you mentioned. So good thinking 😄

[devserkan]

Hello @Mikhail-MM I’m glad someone approved other than me this is because of hot reloading. Not a bug maybe but it bothers people who hit this problem 😃