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 /components folder.
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 /components directory that had the word "new" in their names, knowing that "new" is a reserved word in javascript. I thought maybe Nuxt was having issues with that internally. But that didn't seem to be the case.
I then moved the new folder which has now been renamed to CreateArticle from components/Article/new 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. ✌🏽
