Vue.js stuck on serving at 40% how to recover? - node.js

Question

I decided to delete the node modules folder, do a npm install then do a npm run serve it always gets stuck around 40% and stays there forever. When done from the UI it also gets stuck on a similar amount:
$ vue-cli-service serve --open --mode development --https --dashboard
INFO Starting development server...
40% building 118/134 modules 16 active
...tApp\node_modules\axios\lib\defaults.js
another time:
40% building 134/147 modules 13 active
...\node_modules\axios\lib\adapters\xhr.js
I notice Node.js process is constantly going at around 15%, but nothing happens if I wait and wait and wait.
Package.json
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"#aspnet/signalr": "^1.1.4",
"axios": "^0.18.0",
"vue": "^2.6.10",
"vue-axios": "^2.1.4",
"vue-router": "^3.0.6",
"vuex": "^3.1.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.7.0",
"#vue/cli-plugin-e2e-cypress": "^3.7.0",
"#vue/cli-plugin-eslint": "^3.7.0",
"#vue/cli-plugin-unit-jest": "^3.7.0",
"#vue/cli-service": "^3.7.0",
"#vue/eslint-config-standard": "^4.0.0",
"#vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.2",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/standard"
],
"rules": {
"space-before-function-paren": [
"error",
{
"anonymous": "always",
"named": "always",
"asyncArrow": "always"
}
],
"keyword-spacing": [
"error",
{
"after": true
}
],
"semi": [
"error",
"always"
],
"indent": "off",
"vue/script-indent": [
"warn",
2,
{
"baseIndent": 1
}
]
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "babel-jest"
},
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
],
"testURL": "http://localhost/"
}
}
$ node --version v10.15.3
How do I recover from this?
Update:
There is something magic about the number 40, I removed all mentions of Axios and now I still get stuck at 40% but with a different thing:
40% building 133/146 modules 13 active
...abel\runtime-corejs2\core-js\promise.js

Answer 1

In my case:
It was an error into the template.
Make sure there is a container tag just after
<template><container_tag> ... your code ...</container_tag></template> it could be as simple as a <div>

Answer 2

Try running npm run lint and see if you've got some errors in your code.
I had accidentally left an v-bind:attribute empty, e.g. <el :items=""></el>. Once resolved, I was able to build/serve.

Answer 3

// vue.config.js
module.exports = {
chainWebpack: (config) => {
config.resolve.symlinks(false)
}
}
Link: https://cli.vuejs.org/guide/troubleshooting.html#running-installation-enter code herewith-sudo-or-as-root

Answer 4

In my case:
git conflicts left >>>>>> master in the component, which stopped it from compiling

Answer 5

I my case there was:
git conflict
a tag was not completely closed it was like <div> ..... </div but vs code was not showing this error. when I opened every component, it highlighted the error

Answer 6

Check all your components for merge conflicts.
If you're using vscode, try to search for the string >>>>> on your project folder.

Answer 7

This seems to be caused by an error in one of your project files which prevents compilation and also compresses any error message.
I was personally bothered by this today, and spent a lot of time unnecessarily debugging WSL before finding the error in one of my components.
Try to comment out or remove any components, in templates, component registrations and imports, until it starts loading again.

Answer 8

I ran a linter as a step before serve and noticed that it corrected one of the files. It still didn't run. But I decided to go through the file and noticed that there was one closing tag missing.
It will be tedious, but look through your components to see whether you have a missing closing tag.
I also found that checking the first place the numbers pause and using that as a way to narrow down the file with a problem helped me sort it out faster.
40% building 223/268 modules 45 active ...rders\List.vue?

Answer 9

In my case, one of the environment variables wasn't defined. After I defined it using Webpack DefinePlugin, it all started working again. It would be great to see an actual error in such a case instead of the build process hanging.

Answer 10

I solve this problem by add .eslintignore file. Because I use a big packed third-party module directly in project.

Answer 11

It is most likely due to an error in your source files. In my case I started by removing an import of a deleted component in the main.js, then I removed a few <style> tags from two components (vue prohibits tags that have side effects in template). It may also help to monitor the last files being processed to get a clue about where to look at.

Answer 12

I wasn't missing any tags, but I had copied from my data section in the script to a v-if tag (to ensure I spelled the data variable properly) and I accidentally left the : instead of changing it to an =.
If you are having this problem, it might be something else to check for. It was pretty hard to see! But by removing sections of the code a piece a a time I zeroed in on it.