I had a lot planned for the day, so I woke up earlier than usual, eager to crush my to-do list. And right after having a cup of coffee, I fired up the project, made my first few changes, and saved the file. But nothing happened.
The changes I made did not automatically reflect on my browser like they did last night when I last worked on the project, and the browser did not automatically reload either like it did in the past whenever I made specific types of changes.
I would spend the next several hours debugging what has gone wrong with my project.
TLDR: I moved files and folders around, renamed some files and folders, basically simplifying my folder structure. And that fixed the issue.
The first thing I did was confirm that the file I was editing was correctly imported into the project, making sure there were no typos in the filename. Then I restarted the dev server.
I then did a quick google search, when none of the above proved successful, and someone suggested restarting my laptop. I thought that was a pretty good idea since everything worked perfectly before this morning. I immediately did that, but that didn't solve anything either.
I went ahead to do some other random debugging like deleting the
node_modules folder and
package-lock.json file and re-running
npm install. Then I tried upgrading Nuxt to the latest version. But none of these helped my situation.
Now it's time to take a step back and think about the last few changes I made right up to this point where I'm now facing this very annoying problem.
Quickly, I remembered that one of the major changes I made last night was that I turned off Nuxt's Auto import components. And I did that because I noticed that it made my project a little bit laggy when transitioning from one page to another (Spoiler Alert: That’s probably because I had components deeply nested inside several sub-folders).
When I recalled this change, I then thought, if that's what is causing the issue then the problem must only affect files inside the
/components folder right? To confirm, I made a quick edit to a file inside my
/pages folder. And sure enough, I was right. The issue was related to my turning off Nuxt's “Auto import components” and it only affected files inside the
Long story short. Here's exactly what ended up fixing the issue.
My folder structure looked something like this;
| project -| components - -| Article - - -| ArticleComponent.vue - - -| ArticleComponent2.vue - - -| new - - - -| NewComponent.vue - - - -| NewComponent2.vue -| pages // ...
The first thing I did was rename all the files and folders inside the
I then moved the
new folder which has now been renamed to
components/CreateArticle. Basically reducing the nesting level.
Now my folder structure looks something like this;
| project -| components - -| Article - - -| ArticleComponent1.vue - - -| ArticleComponent2.vue - -| CreateArticle - - -| Component1.vue - - -| Component2.vue -| pages // ...
And then everything started working again. Whew!
This issue was super annoying to deal with, but I must say, it gave me an opportunity to rethink some decisions I made earlier on the project, and the project become a little bit better/structured because of it. But now I'm excited to finally get back to doing some actual coding. ✌🏽