Get Free Notion Templates to Stay Organized & Productive!

Why my React App Failed To Compile

Posted on: Jan 20, 2022

5 mins read

Why my React App Failed To Compile

I was working on a personal React project late December last year and had encountered errors while deploying it on Vercel and for the love of me could not figure out a solution to it. So I took a break from the project and didn't touch it until yesterday.

Deciding to check the status of the project before working on it, I saw that I had made changes on my remote repo and I had to pull it before I continue to work on it locally. And it was then I remembered why I had left the project untouched for that long in the first place and wanted to cry.

So I started the battle again of debugging both on my local repo and tackling the errors from my failed build on vercel. This time around I made sure I cleared all the errors and warnings that my react app was giving me on my console. The console was so white, I started doubting if that itself was an error. Then I pushed it to GitHub which automatically deployed it to vercel.

console screenshot

You would think that finally, it would deploy successfully, it didn't. Instead, I kept having Build failed along with warnings and Error: Command "CI=false npm run build" exited with 1 as feedback.

Build failed screenshot

warning screenshot

error2 screenshot

I tried fixing the error after a few googling and stack overflow visits but I was still getting the warnings and failed deployments.

They were warnings mind you and not errors, so I still expected the code to deploy successfully. And I just couldn't figure out why it wasn't going through. I even shared the problem with some dev friends in one of my WhatsApp group chats.

I lost count of how many times I made tweaks and redeployment of an already perfect code and just when I was about to give up again and abandon the project for God knows how long this time around, I decided to just read for reading sake every single line of the Build log. And you wouldn't believe it, the actual f***king error was sitting there in all its splendor, mocking me at how well it had disguised itself.

component1 error screenshot

Not only had I missed the `Failed to compile line but I also did not see the other errors in the lines that preceded it.

They weren't highlighted in red or yellow as errors and warnings usually are. I'm trying not to curse again, but the mother****er was just sitting there in full incognito mode.

It's a new year and we are barely halfway through January but the coding violence has already begun.

woman saying hope you are ready to fight.gif

Finally, I had found the cause of my deployment woes, or did I?

No. No, I did not. Looking at the incognito error critically and closely, I saw that this was an error my react app would have definitely with all affirmation thrown at me while I was coding and as I mentioned earlier, I made sure I cleared every single warning and error before pushing the code. So what the hell was going on?

a confused monkey with what is going on written on the image.gif

Deciding to now view the code on GitHub because the code on my local repo was perfect, I realized that the code I had there was different from what I had countlessly pushed to it.

stuffed animal sitting on a chair with camera moving around it, the word why printed on the gif

Was I seeing double? No. Why was it happening, I dunno. And frankly, I was too tired at this point to care, I just wanted my code to deploy successfully. So I made the necessary changes to the file on GitHub, committed, and deployed it again. Fingers crossed that it would work now.

It didn't. I read the Build log again and saw the same incognito error disguised in another form.

Another file was having the same issue and I began to reason that if I were to redo the previous steps I had taken again, I might encounter another one because the Build log wasn't showing me at once all the files that were sharing this same error.

component2 error screenshot

So I just decided to delete the entire src folder from the repo on GitHub, make a copy of the perfect src folder in my local repo to my desktop, pull the changes from GitHub, and then add again the copy of the src folder I made earlier and push it back to GitHub. This time it worked. It actually worked. The relief and excitement I felt could not be expressed with words.

man showing expressions of relief and excitement

I had gone through all this stress and trouble and project abandonment just because I didn't fara bale (a Yoruba translation of saying "take time") to read the Build log. All these would have easily been avoided if I had thoroughly read the damn Build Log.

Now, judging from all the bugs and errors I have come across since I started my coding journey, I have finally come to the realisation that

Bugs and Errors will come in different shapes and sizes, styles and formats you never expect, sitting in plain sight or disguise. And the diversity of them requires you to most times be calm and patient, think outside the box, waaaaay outside the box. Oh and read thoroughly through the damn Build log.

I hope this note gives you hope and motivation in finding patience, perseverance, and unexpected ways to tackle your next incognito error or code violence 😁.

Please share this article with your friends if you found it useful. Till next time guys. Byeee!

man smiling and waving goodbye

Image from

giphy.com

Connect With Me

Follow me on X(Twitter), and LinkedIn to stay updated with my latest content.

If you like my notes and want to support me, you can sponsor me on GitHub Sponsor, or you can buy me a virtual ice cream on ByMeACoffee or Selar. I would really appreciate it. 🙏

For other ways to support me, visit my Sponsorship page or Affiliate Links page.

Subscribe to my newsletter 💌

Stay in the loop on the latest articles, tutorials, projects, and exclusive content focused on web development! 💻📚✨