Vue-CLI v3 app: hot module reload not working

Question

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?

What's your environment? (platform? and versions of node, npm, vue-cli, and browser?) Any console logs? — tony19
Does not seem, that you are doing something wrong by what you are describing in your question. You need to debug and/or give more information. I would try to reinstall npm/yarn, reinstalling all npm/yarn modules & vue-cli. Did you uninstall a possible previous vue-cli installation? Maybe try to run it on a different port. And check your firewall config, if anything was blocked, etc. — ssc-hrep3
@tony19 Thank you for your help (and please pardon my tardy response) OS X Yosemite node v10.8.0 npm v6.2.0 vue v3.0.1 Chrome v68 ... and no, since nothing at all happens in my console upon file changes, I have no error logs. And yes, according to the docs on vue-cli v3, I did uninstall previous vue-cli and had to update node. No changes to firewall, nothing pertinent blocked. If this doesn't suggest anything to either of you then I suppose I can try to reinstall all this. — Whiskey T.
@ssc-hrep3 Thank you for your help (and please pardon my tardy response) OS X Yosemite node v10.8.0 npm v6.2.0 vue v3.0.1 Chrome v68 ... and no, since nothing at all happens in my console upon file changes, I have no error logs. And yes, according to the docs on vue-cli v3, I did uninstall previous vue-cli and had to update node. No changes to firewall, nothing pertinent blocked. If this doesn't suggest anything to either of you then I suppose I can try to reinstall all this — Whiskey T.
Do you have any extensions that are blocking the hot module updates? Try opening Chrome with all extensions disabled. You can do that by: (1) close all Chrome instances, (2) run /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-extensions --bwsi --incognito — tony19

Whiskey T. Whiskey T. · Accepted Answer · 2018-09-04T03:36:52

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.

Vue-CLI v3 app: hot module reload not working

4 Answers