Front End Deployment Error & Solve Approach

This problem appeared after 07/10/2021 23:00.

  1. node error, babel-eslient version mismatch When clone the exist code from github and build the app, node display error that babel-eslint version (^10.0.0) doesn't match the dependency requirement(^7.3.2). According to git logs, this dependency appears after @Wei Zhao import @materui/.. css. But all team members work still running and there is no such a bug issue. Solution According to Stack Overflow and CSDN. Add SKIP_PREFLIGHT_CHECK=true could avoid eslint version check. Although it works, the team could not find the description on definition of SKIP_RERFLIGHT_CHECK.
  2. Heroku H13 Error After modify the .env file and redeployed the application encouter H10 error. On Herkou page, it shows our application deployed succeed but user cannot access it. According to Heroku logs, there is a web socket services is runing 30000+ms which results timeout. There is no exact approach to solve this problme. @Sunchuangyu HUANG manually added environment variables to Heroku and turns the error code from H13 to H10.
  3. Heroku H10 Error Now the application is simply crashed when we try to access it. Based on the log, probably there is a problem with memeroy heap. According to segmentfault and QAstack, adding max_old_space_size=4096 should aviod memory leak problem and resulted the error code changed from H10 to H12.
  4. Heroku H12 Error Again, the application deployed succeed but user still cannot access it. This may results by the create-react-app compiling time. According to @Sunchuangyu HUANG local testing, initialing the react app via npm start took around 42 seconds, but any connection request longer than 30 seconds Heroku will terminate the request. Thus trying to optimise the deployment time but this approach doesn't help that much. Even we disable some component potentially cause this problem, e.g. Person.js since react may re-render this component for multiple times.
  5. Create react app not working in Heroku

create react app not working in heroku | Application error after deploy | 503 service unavailable

While search solution on google, @Sunchuangyu HUANG found this video, it seems Heroku may need another build package to build the react app, after adding the new buildpack the Heroku app is working again. Now the team is testing its stability.