Search code examples
vue.jsvue-clivue-cli-3

Vue-CLI v3 app: hot module reload not working


I've installed Vue CLI v3, and in my terminal:

  • created a new app using 'vue create my-project' (accepting default config)

  • navigated to the 'my-project' app directory and run 'npm run serve', the result of which is:

DONE Compiled successfully in 11889ms

App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.3:8080/

Note that the development build is not optimized. To create a production build, run npm run build.

... and then, when making any change whatsoever to the Hello World component, e.g., a tweak to the css, something obvious like the link color, nothing happens; no response in the terminal, no browser refresh, and no update to the page when manually refreshing.

I've built a few apps using Vue in the past, hot module reloading was working previously, but now there is zero activity/response in the terminal regardless of what I change in any project file; only if I close the terminal tab, re-open a tab, navigate to the project directory and re-run 'npm run serve', and refresh the browser do I see the changes. obviously this is unusable. What am I missing?


Solution

  • This issue has been resolved, though I am not 100% sure what caused it.

    I noticed that some people with similar failures of hot reload had mentioned bad directory names. My vue project's parent directory name was legit but I had renamed it at one point (though that was multiple restarts and reinstalls ago), and I also noticed that some of the vue-cli-created project folders were not displaying in the Finder until it was quit and restarted. I figured there was something corrupted about that folder. I created a new folder - a sibling of the dubious folder - and had another go with vue-cli, and it worked as expected.

    Hope this helps someone. Thanks again to those of you who offered suggestions.

    Whiskey T.