Pwa-module: Nuxt build stuck at 95% with @nuxtjs/pwa enabled
https://cmty.app not posting messages so I managed to paste the issue template here :-)
Version
Reproduction link
http://see-additional-comments.dev
Steps to reproduce
- On macbook: install @nuxtjs/pwa with yarn
- add @nuxtjs/pwa in nuxt.config.js modules
- run
yarn devornuxt - build script hangs at 95%
What is expected ?
Build script should finish
What is actually happening?
Build script is stuck at
│ │
│ Nuxt.js v2.8.1 │
│ Running in development mode (universal) │
│ │
│ Listening on: http://localhost:3000/ │
│ │
╰─────────────────────────────────────────────╯
ℹ Preparing project for development 09:19:13
ℹ Initial build may take a while 09:19:13
✔ Builder initialized 09:19:13
› App root: /Users/hugo/dev/some-app 09:19:13
› Generating nuxt files 09:19:13
› Generating routes... 09:19:13
✔ Nuxt files generated 09:19:13
› Creating webpack middleware... 09:19:17
● Client █████████████████████████ emitting (95%) nuxt-pwa-icon
✔ Server
Compiled successfully in 17.68s
```
If I try `nuxt build`, I got a little more verbose error message:
nuxt build
ℹ Production build 09:23:03
plugin:nuxt-rfg-icon Retrieving favicons from realfavicongenerator api +0ms
plugin:nuxt-rfg-icon Finished adding favicons as assets +11s
✔ Builder initialized 09:23:14
✔ Nuxt files generated 09:23:14
● Client █████████████████████████ emitting (95%) nuxt-pwa-icon
◯ Server
ERROR (node:65879) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead 09:23:18
FATAL ENOENT: no such file or directory, open '/Users/hugo/dev/some-app/node_modules/@nuxtjs/icon/.cache/a71aaa/64.png' 09:23:48
╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ Error: ENOENT: no such file or directory, open '/Users/hugo/dev/some-app/node_modules/@nuxtjs/icon/.cache/a71aaa/64.png' │
│ │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
### Additional comments?
I'm really sorry I can't provide a repro link, but this bug is only happening on my macbook (on linux/server env everything runs nice). I updated XCode additional components to latest version then nuxt stopped building. Could it be related?
I tried:
* removing `node_modules` whole folder & re-installing with `yarn`
* removing `.nuxt` folder
* rebooting my computer (who knows?)
*Edit* :
I tried with pwa-icon setup without icon :
['@nuxtjs/pwa', {icon: false }],
```
And it works. Really weird...
HugoHeneault
All 22 comments
Maybe nuxt-rfg-icon and the PWA icon part are clashing?
manniL
on 1 Aug 2019
Hi @manniL
Nice catch: I tried removing nuxt-rfg-icon. It was still stuck.
Then I removed my node_modules folder, ran yarn again.
And nuxt worked. 😲
So I added nuxt-rfg-icon back again and everything seems to work as normal.
Thanks for pointing it out. I'll come back if something break again (I hope not)
Cheers 🍻
HugoHeneault
on 1 Aug 2019
Cleaning up node_modules and doing a yarn install worked for me.
jay8t6
on 13 Feb 2020
I'm having this same problem with the latest Nuxt and deleting node_modules and reinstalling did not work for me, nor did wrapping setInterval functions in if (process.client). Adding { icon: false } to the module configuration for @nuxt/pwa in nuxt.config.js worked, but don't I want my PWA to have an icon?
selfagency
on 28 Feb 2020
I'm having the same issue on 3.0.0-beta.20
Likewise, setting icon to false allows the compilation to complete.
Once I rolled back to 2.4.0 it worked even with the icon enabled
npm remove @nuxtjs/pwa
npm install @nuxtjs/[email protected]
aspickard
on 3 Mar 2020
@selfagency @aspickard This _might_ be due to recent perf improvement to generate icon in another process. Would you please help to reproduce this issue? Like a repo or describing your environment, other modules being used, dependency versions :)
pi0
on 3 Mar 2020
I'm running MacOS 10.15.3 with Node 10.18.0
{
"name": "musiciansbass-app",
"version": "1.0.0",
"description": "Web application for MusiciansBASS.com",
"author": "Musician's BASS",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"test": "jest"
},
"lint-staged": {
"*.{js,vue}": "yarn lint",
"*.{css,vue}": "stylelint"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.27",
"@fortawesome/free-brands-svg-icons": "^5.12.1",
"@fortawesome/free-regular-svg-icons": "^5.12.1",
"@fortawesome/free-solid-svg-icons": "^5.12.1",
"@fortawesome/vue-fontawesome": "^0.1.9",
"@nuxt/types": "^0.6.4",
"@nuxtjs/axios": "^5.9.5",
"@nuxtjs/dotenv": "^1.4.1",
"@nuxtjs/global-components": "^0.6.1",
"@nuxtjs/pwa": "^3.0.0-beta.20",
"@nuxtjs/sentry": "^3.2.4",
"@nuxtjs/style-resources": "^1.0.0",
"@nuxtjs/svg": "^0.1.6",
"@reallifedigital/nuxt-image-loader-module": "^1.4.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"connect-redis": "^4.0.4",
"cross-env": "^5.2.0",
"envkey-webpack-plugin": "^1.1.1",
"express": "^4.17.1",
"express-session": "^1.17.0",
"fastdom": "^1.0.9",
"mitt": "^1.2.0",
"node-sass": "^4.13.1",
"nuxt": "^2.11.0",
"nuxt-i18n": "^6.6.0",
"nuxt-session": "^1.0.3",
"nuxt-vuex-localstorage": "^1.2.6",
"portal-vue": "^2.1.7",
"redis": "^3.0.2",
"sass-loader": "^8.0.2",
"simple-crypto-js": "^2.2.0",
"vue-axe": "^1.0.8",
"vue-gtag": "^1.6.2",
"vue-inline-svg": "^1.2.0",
"vue-smooth-reflow": "^0.1.12",
"vue-sweetalert2": "^3.0.3",
"vue-tailwind": "^0.4.5",
"vue-tasty-burgers": "^1.1.8",
"vue2-animate": "^2.1.3",
"vuelidate": "^0.7.5",
"webkul-micron": "^1.1.6",
"yett": "^0.1.11"
},
"devDependencies": {
"@getify/eslint-plugin-proper-arrows": "^8.0.1",
"@getify/eslint-plugin-proper-ternary": "^3.0.1",
"@nuxtjs/eslint-config": "^2.0.2",
"@nuxtjs/eslint-module": "^1.1.0",
"@nuxtjs/stylelint-module": "^3.2.2",
"@nuxtjs/tailwindcss": "^1.3.3",
"@vue/test-utils": "^1.0.0-beta.31",
"babel-eslint": "^10.1.0",
"babel-jest": "^25.1.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-fp": "^2.3.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jest": "^23.8.1",
"eslint-plugin-nuxt": ">=0.5.1",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-security": "^1.4.0",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-unicorn": "^16.1.1",
"eslint-plugin-vue": "^6.2.1",
"eslint-plugin-vue-a11y": "^0.0.31",
"husky": "^4.2.3",
"jest": "^25.1.0",
"lint-staged": "^10.0.8",
"nodemon": "^2.0.2",
"prettier": "^1.19.1",
"stylelint": "^13.2.0",
"stylelint-config-prettier": "^8.0.1",
"stylelint-config-standard": "^20.0.0",
"stylelint-prettier": "^1.1.2",
"stylelint-scss": "^3.14.2",
"vue-jest": "^4.0.0-0"
}
}
@pi0 I'm also developing on Mac 10.15.3, I've tried Node 8 and Node v12.16.1, both with the same problem. My package.json is:
{
"name": "youARhere",
"version": "1.0.0",
"description": "Share in our common history to guarantee our future.",
"main": "index.js",
"engines": {
"node": ">=8.10"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "export NODE_ENV=development && node --inspect node_modules/.bin/nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"deploy": "npm run build && export AWS_REGION=us-east-1 && sls deploy",
"debug-deploy": "npm run build && export AWS_REGION=us-east-1 && export SLS_DEBUG=* && sls deploy",
"start-server": "npm run build && node app.js",
"start-sls": "npm run build && sls offline start"
},
"keywords": [],
"author": "",
"private": true,
"dependencies": {
"@esri/arcgis-rest-feature-layer": "^2.8.1",
"@esri/arcgis-rest-request": "^2.9.0",
"@nuxt/http": "^0.1.2",
"@nuxtjs/dotenv": "^1.4.1",
"@nuxtjs/pwa": "^2.4.0",
"@nuxtjs/vuetify": "^1.6.1",
"axios": "^0.18.0",
"isomorphic-form-data": "^2.0.0",
"node-fetch": "^2.6.0",
"nuxt": "^2.6.3",
"nuxt-start": "^2.6.3",
"nuxt-webfontloader": "^1.1.0",
"serverless": "^1.65.0",
"serverless-apigw-binary": "^0.4.4",
"serverless-http": "^2.0.1",
"vue-cookie": "^1.1.4",
"vue-geolocation-api": "^0.1.17"
},
"devDependencies": {
"serverless-domain-manager": "2.6.13",
"serverless-offline": "^4.10.0"
}
}
If it helps, the most recent version that will compile for me is @nuxtjs/[email protected]
aspickard
on 3 Mar 2020
@pi0 Ok I think I figured this out - when generating the icons, the icon module attempts to start the node inspector. Since I was running with the --inspector flag in development mode, the inspector had already been started and thus the build fails when attempting to add the icons to the proper hash directory within the .cache directory.
Adding to the confusion, when you attempt to recreate the error, the cache directory for the hash has already been created. Since the icon module only checks to see if the directory exists when creating the icons, it assumes that the icons have already been created when they actually haven't.
I'm not sure where the node inspector is started within the pwa-icon module, my my suggested fixes would be:
- When starting the inspector, ensure that it hasn't already been started.
- When checking that the icons have been created, ensure that each icon has been created properly rather than just the containing directory. https://github.com/nuxt-community/pwa-module/blob/8283d80e603bbb3562e604b7adc0af3ab5ce41e0/lib/icon/module.js#L155-L174
aspickard
on 5 Mar 2020
I don't know why it happens, but I'm also getting this issue sometimes (stuck on 95% with pwa), which currently I fix it temporary by deleting node_modules\@nuxtjs\pwa\lib\icon\.cache folder entirely and restarting the build.
the only thing i can say is that i think it happened after upgrading packages or installing a new package and i can't track back what caused it, sorry.
jd1378
on 14 Mar 2020
Thanks to @aspickard I can confirm it has something to do with inspection (i use --inspect-brk), I can reproduce the issue now and fix it by deleting the empty folder and running the build for few seconds without inspector so the icons are created , then stop the build and continue using --inspect-brk again
and redo it every time a package is changed because the cache gets cleared.
jd1378
on 15 Mar 2020
I had the same issue. It started to happen after I manually edited the manifest to add "purpose" values for the icons. I really didn't do anything else. To fix my problem, I ran npm remove @nuxtjs/pwa and then npm install @nuxtjs/pwa.
AllanOricil
on 19 Apr 2020
I'm having the same issue while running npm run build on a Raspberry Pi (Raspbian). Process hangs on additional chunk assets processing (90%) every time. I've deleted node_modules and .nuxt folders. Didn't help.
I haven't tried removing PWA icon, as I do need it.
> nuxt build
i Production build
√ Builder initialized
√ Nuxt files generated
* Client █████████████████████████ additional chunk assets processing (90%)
( ) Server
I've waited about 10 minutes and when I stopped it and looked at Load Average, it was over 57. Never seen it that high :)
Package versions:
"@nuxtjs/pwa": "^3.0.0-beta.20",
"nuxt": "^2.12.2",
Edit
I can confirm, it builds successfully with "@nuxtjs/pwa": "^3.0.0-beta.14",
SixBytesUnder
on 30 May 2020
Also have the same issue. I kept increasing the memory limit and it just uses more and more until the memory heap runs out and it crashes. Increased to 8 GB of memory and it used it all up.
rcheung9
on 11 Jul 2020
Same issue for me, any updates?
yugasun
on 4 Aug 2020
I had node version 10.x and the issue was there. After updating to v12.18.1 it builds just fine every time.
SixBytesUnder
on 4 Aug 2020
@yugasun Were you able to find a workaround? I'm also facing same issue.
rlam3
on 22 Aug 2020
Can you please confirm same happening with 3.0.0 stable?
pi0
on 22 Aug 2020
Hi. I got this error: with version 3.0.2
verbose stack Error: ENOENT: no such file or directory, rename 'D:\\laravel-nuxt-pwasite\node_modules\@nuxtjs\pwa\node_modules\cross-spawn'
But when installed 3.0.1 it worked.
thor-n
on 7 Sep 2020
I have the same problem on my production vps, but on development enviroment all works fine.
AdsonCicilioti
on 13 Sep 2020
Should be fixed by 3.1.0 (thanks to @1ed :heart: )
pi0
on 6 Oct 2020
Related issues
sq-zhou
·
9Comments
TannerGilbert
·
7Comments
matamune94
·
7Comments
jhull
·
3Comments
manniL
·
3Comments
Most helpful comment
Hi @manniL
Nice catch: I tried removing
nuxt-rfg-icon. It was still stuck.Then I removed my
node_modulesfolder, ranyarnagain.And
nuxtworked. 😲So I added
nuxt-rfg-iconback again and everything seems to work as normal.Thanks for pointing it out. I'll come back if something break again (I hope not)
Cheers 🍻