npm run serve get stuck on 40% while running - vue.js

Question

It’s been a couple of weeks that I’m working on a Vue js project Vuetify to be specific. I use npm run serve command to build and run a live server. it was working fine everything was okay but suddenly I run my project again and boom can’t building anymore it gets stuck 40% without throwing anything as a bug or an error. I wanna know guys if you had similar issue like mine or if you know how to troubleshoot this issue. thank in advance.
I'm using npm 6.9.0 , node v10.16.0 and vue 3.9.2
package.json
{
"name": "mycode",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.0",
"core-js": "^2.6.5",
"fuse.js": "^3.4.5",
"moment": "^2.24.0",
"vue": "^2.6.10",
"vue-axios": "^2.1.4",
"vue-i18n": "^8.12.0",
"vue-router": "^3.0.3",
"vue-table-component": "^1.9.2",
"vuelidate": "^0.7.4",
"vuetify": "^1.5.5"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.9.0",
"#vue/cli-service": "^3.9.3",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"live-server": "^1.2.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"typescript": "^3.5.3",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}

Answer 1

Sometimes during the compiling process certain errors occur. For example say I have a component with a template that contains the following
<template>
<imagingheader></imagingheader>
<router-view ></router-view>
</template>
Now what is wrong with this picture?
There are two base elements in the template. During the compiling process this will prevent it from going any further and sadly the server does not start to display this error. Moving the two elements into a common div tag fixes the issue and moves the compling process from 40% to 100%.

Answer 2

Take some time and look through your code and see whether you will get a missing closing tag. It can be a missing , , ... etc.
Keep an eye on the first place the numbers pause and use that as a way to narrow down the problems you might face.
40% building 223/268 modules 45 active ...rders\List.vue?

Answer 3

I just ended up wasting 30 minutes on a similar issue, to find out that I had a merge (due to git pull) in progress and there were conflicted filed :/