Npm Run Serve Never Loads Project in Browser

[jonah-butler]

Version

5.0.8

Reproduction link

github.com

Environment info

  System:
    OS: macOS 12.4
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
  Binaries:
    Node: 16.15.1 - /usr/local/bin/node
    Yarn: Not Found
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.5
  npmGlobalPackages:
    @vue/cli: 5.0.8

Steps to reproduce

1. Clone repo
2. npm install
3. npm run serve
4. open :8080 in browser of choice

What is expected?

The vue cli app should load in browser of choice.

What is actually happening?

The application compiles successfully, and shows a success message in terminal. When opening localhost in Chrome, the tab spins infinitely. When opening the application in Safari, it displays a message about this page being unresponsive. Neither the terminal or browser console displays any messaging that would indicate an issue.

---

This issue was found after setting up a store. There was a typo in my dispatch call. The app kept calling the dispatch with the typo, and effectively crashed the local app. I force quit the tab in chrome and fix the typo. Now the vue app does not load whatsoever. It compiles, but is not able to be served in the browser.

[jonah-butler]

Turns out it was an infinite loop triggered by the router's beforeEach logic. Not having any logged feedback made this tricky to debug.