3

Some background:

I started my project with a clone of this repository. Here's an example of the code. After some time, I realized that the vue-cli-service it used appeared to be old. (They even renamed it to '@vue/cli-service'). So, I ran npm update. The code has me use npm run serve to start the service. It's apparently equivalent to npx vue-cli-service serve. When I did that, it couldn't load some bootstrap stuff. I reinstalled bootstrap (npm install bootstrap@version (don't have access to the exact line I used). It then said it couldn't find '@vue/cli-plugin-babel'. I saw it right in the node_modules folder.

I fixed it using this process:

  1. I ran npm update.
  2. It first said that it could not find a font (no longer have the specific details). The error directed to the bootstrap.css file.
  3. I reinstalled bootstrap.
  4. I run npm run serve, and it says "Cannot find module '@vue/cli-plugin-babel'"
  5. I see '@vue/cli-plugin-babel' showing in the node_modules folder
  6. I run npm list --depth=0, and '@vue/cli-plugin-babel' does not show up. I*’m seeing this
  7. npm cache clean --force alone did not cause the site to resume. It still said “ Cannot find module '@vue/cli-plugin-babel'”.
  8. Following the top SO answer here got my site to work again.
    1. rm -rf node_modules/
    2. npm cache clean (then replaced with npm cache verify on npm's prompt)
    3. npm install (I wonder if it was possible to ignore ‘rm -rf node_modules/’ and just do the last two steps).
  9. I run npm run serve, and the site works again.
  10. After running npm list --depth=0 again, there are no more UNMET DEPENDENCY issues, like with #6.

Also on that SO Q&A, people talked about restructuring (reordering) the package.json file. In the top answer he says that a possible solution is to “Re-structure your package.json. Place all the high-level modules (serves as a dependency for others modules) at the bottom.”. I wonder if that relates to my issue.

My expected vs. actual results:

When I updated it, I actually sort of expected it to break. I got that.

But what I also expected was:

  1. If the node module is there, it will not give me an error.
  2. If I run npm install, all dependencies will be handled automatically.
  3. If npm install doesn't do the trick, then npm cache clean --force should do the trick. (Note: I later learned about npm cache verify).

I got:

  1. The '@vue/cli-plugin-babel' module was there and it gave an error saying it couldn't find it.
  2. (And also 3.) Running npm install and npm install [unmet-dependency] did not work until after 'rm -rf node_modules/' -> `npm verify cache' and THEN -> 'npm install'.

Here are my guesses:

  • @vue/cli service doesn’t check the folders directly to see if a module exists (75% chance it’s true)
  • @vue/cli service uses a proxy, something like the packages.json file (but different) to see if a node exists (40%).
  • @vue/cli service caches commonly used stuff. So, when I ran it again after the update, it didn’t check the new stuff in my folder, it checked its cache. It didn’t line up. (10%).
  • For everything above, replace @vue/cli service with npm (10%).

Again, my biggest question is "How could the vue-cli-service crash because of the '@vue/cli-plugin-babel' module, if the node module is there?"

And "How did removing the node_modules folder, verifying the cache, and reinstalling with npm cause npx vue-cli-service serve to successfully run my site again (and find @vue/vue-plugin-babel)?".

0 Answers0