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

[Mikhail-MM]

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

[LinusU]

my entire app occasionally crashes and refreshes

Are you referring to your frontend here, that runs in the browser?

[Mikhail-MM]

Yes - I have 2 fetch requests which cause this behavior - both are multipart/form-data, and run through multer as middleware in Express.

The fetch requests will occasionally work fine. At times, however, something happens when the fetch promise chain is supposed to receive a response from the server. The entire page goes blank, the app resets.

(Console reads The development server has disconnected. Refresh the page if necessary., which is create-react-app / webpack hotreloader refreshing the app, but this should only happen if code has changed, or if I manually refresh the page)

The strangest thing is that the fetch requests occasionally happen with no problem at all.

However, when it fails, the fetch request will seem to be lost with no status code - and yet API actions and functions will successfully happen - Image will be uploaded, data entered, but then the app is flushed of all state and rebooted.

There is no error on the back-end, since my API is successfully updated with the info and image - and this does not happen with other Content-Type: application/json requests. I have removed all callbacks from the fetch request to ensure I am not navigating away or creating side-effects, problem still occurs. I am now out of ideas, I am trying to solve this for several days, and can not find the root cause - I suspect something is going wrong with the actual fetch implementation and integration, I have no clue why it would cause a client-side reset and actionable API change... :\

[LinusU]

Could it be that the hot-reloading/file-watching part is detecting the uploaded file as a change, and then restarts/refreshes the app?

[devserkan]

Hello. I've been struggling with this problem also and asked a question on SA before checking here:
https://stackoverflow.com/questions/49280697/file-upload-with-multer-refreshes-react-app

Now, after what @LinusU asked I checked it in a production environment without my CRA setup, it works and no refreshing as far as I see.

So, @Mikhail-MM issued a report on CRA side also:
facebook/create-react-app#4095

I commented there too. I'm relived this is not my code's fault :)

[Mikhail-MM]

@devserkan I am glad to see I'm not the only one with this issue (Well, not GLAD, but you know what I mean :P )

Let me know how your progress goes in finding a solution. I am reluctant to put the blame on CRA, but I am lost in determining the cause. Something happens when the specifically multipart/formData fetch request is processing the response from the API after an img upload ... multer is working properly, the file is being uploaded, but I think it may be an issue with the actual fetch spec interacting with CRA? Man, I really am not sure. @LinusU suggestion that react may be picking up a new file seems to be the sensible solution. However, I have had this bug pop in-and-out with the same code, the very same request - at times going through and at times refreshing, so again, I am stumped, please keep me informed if you find any leads to the solution.

[devserkan]

@Mikhail-MM, you are not alone for sure :) But, I'm so surprised we are the only ones hit that problem or others don't care? Unfortunately, I'm not so capable to find the reason what causes this problem within CRA since I'm a learner, but what @LinusU said seems very logical to me.

After uploading the file hot-reload part thinks there is change on the source so it refreshes, I think?
I stopped searching for a solution since the problem does not block my development, at least not so much. I hope someone replies on CRA side and you find a solution.

[devserkan]

Hello again @Mikhail-MM. Now it has started to block my development today :) First I used disabling hot reloading (actually blocking the request) temporarily while I was working that part of my code. I used this solution for that: facebook/create-react-app#2519 (comment)

But that bothered me too much. After that I change my code logic. I was uploading files to client's public directory in development environment and some other place in production. I've merged the directories, say in /public/images directory, serve /public statically with Express and use a REACT_APP_SOME_VAR environment variable to use express API URL in my client's code to show the file URLs.

[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 :D

[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 :)