The NPM start issue: Page Unresponsive

I opened up VSCode and was eager and excited to start working on some new features/functionality within my app.

I started as usual. I ran rails s in my backend directory and ran npm start in my frontend directory. TO MY SURPRISE my browser just continued to spin, displaying nothing on the screen. I thought maybe I just needed to give it some time. Nope, I received an error message:

Page unresponsive?! How?! Why?! I clicked wait, expecting a miracle but was let down.

This let me into a frantic google search frenzy. Some of the resolutions I came across were to delete my node_modules & package.json lock. I proceeded to do this about 10 times. As if the first time wasn’t a clear enough sign that, that wasn’t the real issue. I was so certain that this issue had to come from one of my dependencies.

I continued to dig deeper. I went through each one of my files, analyzing each line. After doing this, the issue hit me right in the face. I almost had to laugh because it was such a simple error with such a simple solution.

THE PROBLEM:

• I had mistakenly created an infinite loop by basically nesting the parent component in the parent component itself i.e instead of using tags.

THE SOLUTION:

• I fixed by removing the parent component and replacing with the right tag and my app came back up.