Table of contents
As developers, we may encounter bugs in our code unexpectedly. These bugs can be caused by factors outside of our control, or they may be a result of our own mistakes, it is important to know how to debug them because it improves our skills as developers which ultimately leads to career growth.
In this post, I'll be sharing a story of how I introduced a bug in my code, the steps I took to debug it, and ultimately how the solution got me my first upvote on Stackoverflow.
Backstory
As of March 16, 2022, the tech world was buzzing with excitement over a tool released on 20 April 2020 that promised to revolutionize the way developers build React applications. This tool was none other than Vite, a cutting-edge software that boasted a range of impressive features designed to enhance productivity and supercharge development speed.
Since I was about to work on a new React project, the timing couldn't have been more perfect. So, on a bright and sunny Saturday morning, I quickly bootstrapped a new React project using Vite and from the moment I began working with Vite, it was clear how efficient this tool was when compared to create-react-app and it made the development process feel smoother and more intuitive than ever before.
Everything was going smoothly until...
The Bug
Something weird happened. I noticed fast refresh wasn't working on one of the files, specifically the Home/index.jsx file. Every time a change was made or an update was done to this file, it did not reflect on the browser.
Here's an illustration of the issue which is visible when I try to update the content of the <h1> tag.
P.S. The image above is just to illustrate the bug and not the project I was working on.
I hit refresh a few times, but the result still wasn't showing up. I thought the server might be down or having some issues, so I tried restarting it, the new changes appeared but the problem persisted when I tried to make a new change.
Since I hadn't written much code in the project, I knew the bug couldn't have been from a code I wrote or something like that. To verify that the problem wasn't persistent throughout the entire project, I tried to update the About/index.jsx file. Fast refresh worked perfectly on the About/index.jsx file, and every other file except Home/index.jsx, and on the terminal, the resulting output had a few differences. This narrowed down my search a little since only a single file was affected, it would be easier to debug the issue.
Changes made to the About/index.jsx file yielded this output in the terminal:
$ [vite] hmr update /src/pages/About/index.jsx
hmr update /src/index.css
But on the affected Home/index.jsx file, the result was different.
$ [vite] page reload src/pages/Home/Index.jsx
If you look closely, you should already notice the source of this bug but as someone who was just using Vite for the first time, I was oblivious to it. On the other hand, don't worry if you didn't notice it as all will be revealed very soon.
The main difference I could pick from the terminal output was the word, HMR. I didn't know anything about it so I Googled it. Turns out that Hot Module Replacement or HMR was responsible for the instant, precise updates that adds or removes modules without having to reload the page or disrupt the application state that we use in build tools like Vite or even frameworks like React and Vue. 🤯 Mind-blowing right?
Since I knew what was responsible for handling fast refresh, it didn't take long for me to stumble upon what could be a solution to my problem.
The Solution
I discovered a stackoverflow thread that discussed the issue but only a few solutions were given and none of the suggested ways resolved my particular bug, however, it lead me to a conversation on Vite's repository.
Under the thread, the proposed solution to this bug was to remove all named export inside top-level components like in App.js. For example, just adding the code below was said to break HMR
// App.js
export const foo = 12;
Since I didn't have any named export in my App.js file, this didn't solve my problems either. The last resort was asking the community which I did on the same thread.
I even provided a repository that replicated the issue so it could be debugged further. I got a response later on a possible solution to my problem.
According to the solution, I updated my folder structure from this:
src/
├── pages/
│ ├── Home/
│ │ ├── Index.jsx
│ │ └── Home.Styled.jsx
│ └── About/
│ ├── index.jsx
│ └── About.Styled.jsx
└── /...
To
src/
├── pages/
│ ├── Home.jsx
│ └── About.jsx
└── /...
I simply removed the folders for each file and explicitly named them instead of calling them index.jsx and since I was using styled components, I injected the styles directly inside each component. This was what a file looked like:
And that was how fast refresh started working on my project again.
The Upvote
Since I got a different solution for the same problem, I dropped an answer on the stackoverflow thread to help anyone experiencing the same issue, and not before long. I received my first upvote on the answer! 🥳
Here's my answer on the stackoverflow thread if you're interested in reading it.
But before I summarize this post, I will like to highlight that although the solution above fixed my problem, the bug was caused by a case mismatch on the component name. Yes! The bug was from a typo. Ideally, I mistakenly named the Home/Index.jsx with an uppercase I, it should have been Home/index.jsx *Facepalm*
Luckily, Vite now highlights this issue in their docs which is pretty cool. :)
Summary
Debugging a problem does not necessarily mean you have to figure out the solution yourself. Sometimes the most meaningful thing to do when faced with an issue in your code is to ask for help. Of course, I recommend you try fixing it yourself first but don't get stuck trying to do so. Learn to ask the community. Even the best developers do.
To summarize, this may not be the most awesome post on how to debug an issue in your code much less how to get an upvote on Stackoverflow but I'm glad to have been able to share my experience throughout the process. I hope it encourages you to share solutions to your problems on Stackoverflow or other communities you find yourself in.
I have other debugging stories to share so if you are interested, let me know in the comments and I might write about them as well. Thanks for reading.