I found that vue-cli (2.9.6, but 3.0.0 beta* has the same issue) 's building process takes forever once the template's html gets relativelly deep.
For example, I just added some divs to App.vue which is pre-included:
<template>
<div id="app">
<img src="./assets/logo.png">
<div><div><div><div></div></div></div></div>
<HelloWorld/>
</div>
</template>
which doesn't take so long.
But once it gets this:
<template>
<div id="app">
<img src="./assets/logo.png">
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
<HelloWorld/>
</div>
</template>
then the building process takes forever, and I believe that the nest of this depth isn't so uncommon.
How should I deal with this problem?
EDIT(Details)
It seems that the problem might be environment specific, so here are the details.
This problem can be reproduced with these environments at least:
- macOS High Sierra on Mac mini (Late 2014)
- Ubuntu 18.04 on Dell XPS 13
and node and npm version are:
node --version
# prints
v8.9.4
# and
npm version
# prints
{ npm: '6.1.0',
ares: '1.10.1-DEV',
cldr: '31.0.1',
http_parser: '2.7.0',
icu: '59.1',
modules: '57',
nghttp2: '1.25.0',
node: '8.9.4',
openssl: '1.0.2n',
tz: '2017b',
unicode: '9.0',
uv: '1.15.0',
v8: '6.1.534.50',
zlib: '1.2.11' }
With these, I've retried the followings on my Mac:
npm uninstall -g vue-cli
npm install -g vue-cli
vue init webpack divnest
# then some Enter keys - everything is default
cd divnest
Then, open up App.vue and put many divs:
<template>
<div id="app">
<img src="./assets/logo.png">
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
<router-view/>
</div>
</template>
(Since I used the default settings here, <router-view/> is included unlike the original post, but should not be the problem.)
And finally,
npm run dev
which takes forever - specifically, the process stops at this point:
13% building modules 28/31 modules 3 active ...myname/Documents/divnest/src/App.vue
In the case of
npm run build
, the process stops at this point:
> divnest@1.0.0 build /Users/myname/Documents/divnest
> node build/build.js
Hash: 483ebabc54d5aed79fd7
Version: webpack 3.12.0
Time: 13742ms
Asset Size Chunks Chunk Names
static/js/vendor.7fed9fa7b7ba482410b7.js 112 kB 0 [emitted] vendor
static/js/app.f1ebca7a6e0ec0b7ebdf.js 12 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest
static/css/app.30790115300ab27614ce176899523b62.css 432 bytes 1 [emitted] app
static/css/app.30790115300ab27614ce176899523b62.css.map 828 bytes [emitted]
static/js/vendor.7fed9fa7b7ba482410b7.js.map 553 kB 0 [emitted] vendor
static/js/app.f1ebca7a6e0ec0b7ebdf.js.map 23.3 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
index.html 509 bytes [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
94% asset optimization
and if I let it go, it takes... 1155409ms!!!!
DONE Compiled successfully in 1155409ms 13:35:34
I Your application is running here: http://localhost:8080
MORE EDIT
As @tony19 pointed out, prettier is the likely suspect. Following the advice, I've tried some patterns with Ubuntu 18.04 (not Mac because Mac isn't here right now, sorry) and my results are:
- vue-cli 2.9.6 +
npm run dev- hang - vue-cli 2.9.6 +
npm run build- 6 secs (This is so confusing. What was the 1 million seconds above!? Maybe reinstalling vue-cli owes the change?) - vue-cli 3.0.0-beta16 +
vue serve- hang (as opposed to @tony19's report) - vue-cli 3.0.0-beta16 +
vue build- 5 secs
EVEN MORE EDIT
So, it seems that this is definitely caused by prettier. https://github.com/prettier/prettier/issues/1250 is the original issue that addressed this problem and the dev team thought that https://github.com/prettier/prettier/pull/2259 fixed it, but the reality is that it couldn't handle my case, as @tony19 shows it on https://github.com/prettier/prettier/issues/4672 . Oh well.
"SOLUTION"
I ended up doing this - following @tony19's report, changing /node_modules/vue-loader/lib/template-compiler/index.js lines 78:81
if (!isProduction) {
code = prettier.format(code, { semi: false })
}
to
// if (!isProduction) {
// code = prettier.format(code, { semi: false })
// }
thus the problem is solved. Thank you frontend, thank you.
