npm run serve get stuck on 40% while running

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%.