Why does Vercel repeat downloading and installing on build? - vue.js

I have a Vite and Vue.js webapp hosted on Vercel. Every time I deploy it, the downloading/installing process happens multiple times — 7 to be precise. Why does it repeat?
Build log:
Cloning github.com/* (Branch: main, Commit: *)
Cloning completed: 719.461ms
Installing build runtime...
Build runtime installed: 1.038s
Installing build runtime...
Build runtime installed: 985.054ms
Installing build runtime...
Build runtime installed: 930.743ms
Installing build runtime...
Build runtime installed: 923.02ms
Installing build runtime...
Build runtime installed: 1.004s
Installing build runtime...
Build runtime installed: 911.844ms
Installing build runtime...
Build runtime installed: 1.728s
Looking up build cache...
Looking up build cache...
Looking up build cache...
Looking up build cache...
Looking up build cache...
Build cache downloaded [50.34 MB]: 5158.433ms
Build cache downloaded [50.34 MB]: 5433.283ms
Build cache downloaded [50.34 MB]: 5694.941ms
Build cache downloaded [50.34 MB]: 6005.223ms
Installing dependencies...
Build cache downloaded [50.34 MB]: 5981.376ms
Installing dependencies...
Installing dependencies...
Installing dependencies...
Installing dependencies...
up to date in 2s
76 packages are looking for funding
run `npm fund` for details
up to date in 1s
76 packages are looking for funding
run `npm fund` for details
up to date in 1s
76 packages are looking for funding
run `npm fund` for details
up to date in 2s
76 packages are looking for funding
run `npm fund` for details
up to date in 2s
76 packages are looking for funding
run `npm fund` for details
Installing dependencies...
Looking up build cache...
up to date in 1s
76 packages are looking for funding
run `npm fund` for details
Build cache downloaded [50.34 MB]: 3225.874ms
Installing dependencies...
up to date in 1s
76 packages are looking for funding
run `npm fund` for details
Detected `package-lock.json` generated by npm 7+...
Running "npm run build"
> *#* build
> vite build
vite v2.9.13 building for production...
transforming...
✓ 109 modules transformed.
rendering chunks...
Why does Vercel repeat downloading and installing on build?
My “vercel.json” file:
{
"cleanUrls": false,
"trailingSlash": false,
"rewrites": [
{ "source": "([^#.]*)", "destination": "/index.html" }
],
"redirects": [
{ "source": "/", "destination": "*" }
],
"headers": [
{
"source" : "(.*)",
"headers" : [
{ "key" : "Content-Security-Policy" , "value" : "*" }
]
}
]
}
My “package.json” file:
{
"name": "*",
"version": "*",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173",
"test:unit": "vitest --environment jsdom",
"test:e2e": "start-server-and-test preview http://127.0.0.1:4173/ 'cypress open --e2e'",
"test:e2e:ci": "start-server-and-test preview http://127.0.0.1:4173/ 'cypress run --e2e'",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-brands-svg-icons": "^6.1.1",
"#fortawesome/free-regular-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/vue-fontawesome": "^3.0.1",
"#popperjs/core": "^2.11.5",
"bootstrap": "^5.1.3",
"dotenv": "^16.0.1",
"mitt": "^3.0.0",
"mongodb": "^4.7.0",
"node-mailjet": "^5.0.1",
"vue": "^3.2.37",
"vue-router": "^4.0.16"
},
"devDependencies": {
"#rushstack/eslint-patch": "^1.1.0",
"#vitejs/plugin-vue": "^2.3.3",
"#vue/eslint-config-prettier": "^7.0.0",
"#vue/test-utils": "^2.0.0",
"axios": "^0.27.2",
"cheerio": "^1.0.0-rc.12",
"crypto": "^1.0.1",
"cypress": "^10.1.0",
"eslint": "^8.5.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-vue": "^9.0.0",
"jsdom": "^20.0.0",
"prettier": "^2.5.1",
"start-server-and-test": "^1.14.0",
"vercel": "^26.0.0",
"vite": "^2.9.12",
"vitest": "^0.15.1"
}
}

Related

How to resolve 5 high severity vulnerabilities in npm audit report for glob-parent, chokidar, watchpack-chokidar2, and webpack?

I have Laravel, Inertia, Vue 3 stack project. And when i run npm install there is have 5 high severity vulnerabilities. And i run npm audit, then the error is:
# npm audit report
glob-parent <5.1.2
Severity: high
glob-parent before 5.1.2 vulnerable to Regular Expression Denial of Service in enclosure regex - https://github.com/advisories/GHSA-ww39-953v-wcq6
fix available via `npm audit fix`
node_modules/watchpack-chokidar2/node_modules/glob-parent
chokidar 1.0.0-rc1 - 2.1.8
Depends on vulnerable versions of glob-parent
node_modules/watchpack-chokidar2/node_modules/chokidar
watchpack-chokidar2 *
Depends on vulnerable versions of chokidar
node_modules/watchpack-chokidar2
watchpack 1.7.2 - 1.7.5
Depends on vulnerable versions of watchpack-chokidar2
node_modules/vue-share-buttons/node_modules/watchpack
webpack 4.44.0 - 4.46.0
Depends on vulnerable versions of watchpack
node_modules/vue-share-buttons/node_modules/webpack
5 high severity vulnerabilities
To address all issues, run:
npm audit fix
I want to fix this message, although this error not affected by to my project, and my project still working normally. I have already run npm audit fix again, but its still return same error.
My package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.25",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vue-loader": "^16.8.3"
},
"dependencies": {
"#inertiajs/vue3": "^1.0.0",
"#tabler/icons-vue": "^2.1.2",
"#tinymce/tinymce-vue": "^4.0.7",
"#vueform/multiselect": "^2.5.1",
"maska": "^1.5.0",
"moment": "^2.29.4",
"sass": "^1.55.0",
"vue": "^3.2.29",
"vue-chart-3": "^3.1.2",
"vue-easy-lightbox": "^1.8.2",
"vue-meta": "^3.0.0-alpha.10",
"vue-recaptcha": "^2.0.3",
"vue-share-buttons": "^1.0.4",
"vue-sweetalert2": "^5.0.2",
"vue3-carousel": "^0.1.40"
}
}

How do you deploy api made with express in create react app

I have a simple api created with express.js. When ever i try to push to Heroku it get stuck at this point?
remote: [4/4] Building fresh packages...
remote: Done in 16.30s.
remote:
remote: -----> Build
remote: Running build (yarn)
remote: yarn run v1.22.4
remote: $ node server.js
remote: Server started on port 9000
I also see the same thing in heroku dashboard "View build progress"
here is my package.json
{
"name": "firebase-server",
"version": "1.0.0",
"main": "index.js",
"repository": "##########",
"author": "#######",
"license": "MIT",
"scripts": {
"start": "nodemon --ext js,graphql --ignore data/ server.js",
"build": "node server.js"
},
"dependencies": {
"#firebase/app": "^0.6.7",
"#firebase/component": "^0.1.15",
"apollo-server-express": "^2.15.1",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"express-jwt": "^6.0.0",
"firebase": "^7.15.5",
"graphql": "^15.3.0",
"jsonwebtoken": "^8.5.1",
"notarealdb": "^0.2.2"
},
"devDependencies": {
"nodemon": "^2.0.4"
}
}
the only thing i have in this project is my server.js. what am i missing or not doing. Basically i trying to deploy this to have a live API for my project. it is working locally but now i would like to have it working live on heroku.
With Heroku, the build script is used if you need to customize your build options (e.g. if you're using WebPack or TypeScript). The issue is that you're using a script called build, which you're expecting to start the application. It's running that script, as it promises to do, but since it's starting the application, it'll "hang forever" from your point of view.
If you change your scripts to this, I think this will solve your issues. Locally, you would use npm local for nodemon, and npm start would start the app on Heroku.
{
"scripts": {
"local": "nodemon --ext js,graphql --ignore data/ server.js",
"start": "node server.js"
},
}

Custom Webpack wrapper library not installing dependencies

I wrote a wrapper library for internal use of webpack with all the needed loaders and config stuff pre-done so I only have to install the wrapper library to every project and add the entry configuration.
So far that worked but for my newest, freshly cloned project it doesn't.
I tried deleting the node_modules folder and the package-lock.json file and do a clean npm i but it's still the same.
webpack-cli is installed, but has webpack as peer-dependency and it says it isn't installed. When I add it to the projects' package.json it works, but then trying to npm run build results in several errors that it couldn't find any of the loaders that should have been installed with the library.
project package.json
"scripts": {
"build": "webpack --progress --colors --hide-modules",
"dev": "npm run build --",
"watch": "npm run dev -- --watch",
"prod": "NODE_ENV=production npm run build"
},
"devDependencies": {
"#namespace/lib": "git+ssh://git#internal:js/lib.git"
},
library package.json
"dependencies": {
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"autoprefixer": "^9.3.1",
"babel-loader": "^8.0.4",
"copy-webpack-plugin": "^4.5.4",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"image-webpack-loader": "^4.4.0",
"lodash": "^4.17.11",
"node-sass": "^4.9.4",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2"
},
"devDependencies": {
"eslint": "^5.8.0",
"standard": "^12.0.1"
}
I deleted the
"#namespace/lib": "git+ssh://git#internal:js/lib.git"
line from the projects' package.json file and did a
npm i -D git+ssh://git#internal:js/lib.git
and now it installed all the libraries' dependencies.
Before that I just ran npm i from the newly cloned project with the existing lines in the package.json. I don't understand why that would make a difference, but it seems it did!
//EDIT:
Another thing that worked:
git reset --hard
rm package-lock.json
rm -rf node_modules # deleting already installed modules from the previous tries
npm i
So from a fresh git clone-perspective it's just deleting the lock-file and then installing again. But without a pre-existing node_modules folder.

npm - using stale package data

Whenever I do an npm install, I get a ton of messages about it using stale package data. What does that mean and is it something I need to worry about?
Here's a small example of the warning messages I get with an npm install. In this particular example I just added "npm install #angular/animations#latest --save":
WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0
g== integrity checksum failed when using sha512: wanted sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0g== but got sha1-2+xJQ20q4V9TYRTnbRRlbNvA9E0
=. (8538 bytes)
WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUu
g== integrity checksum failed when using sha512: wanted sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug== but got sha1-wVm41b4PnlpvNG2rlPFs4CIWG4g
=. (3618 bytes)
WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0
g== integrity checksum failed when using sha512: wanted sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0g== but got sha1-2+xJQ20q4V9TYRTnbRRlbNvA9E0
=. (8538 bytes)
WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUu
g== integrity checksum failed when using sha512: wanted sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug== but got sha1-wVm41b4PnlpvNG2rlPFs4CIWG4g
=. (3618 bytes)
WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
Here is the current package.json file that I have for my project:
{
"name": "myproject",
"version": "0.0.1",
"license": "me",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --extract-css true",
"build-prod": "ng build -prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"update:packages": "node wipe-dependencies.js && rm -rf node_modules && npm update --save-dev && npm update --save",
"prestyleguide": "ng build --extract-css true",
"styleguide": "rimraf dist/styleguide/ && kss --config kss/kss-config.json --custom hidemarkup --custom hideexample --custom hidedefault --custom fakeexample --placeholder .modifier-class",
"//": "Build just the styleguide without building the entire app (requires that the app has already been built to the dist/ folder)",
"build-styleguide": "rimraf dist/styleguide/ && kss --config kss/kss-config.json --custom hidemarkup --custom hideexample --custom hidedefault --custom fakeexample --placeholder .modifier-class"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.3.3",
"#angular/common": "^4.3.2",
"#angular/compiler": "^4.3.2",
"#angular/core": "^4.3.2",
"#angular/forms": "^4.3.2",
"#angular/http": "^4.3.2",
"#angular/platform-browser": "^4.3.2",
"#angular/platform-browser-dynamic": "^4.3.2",
"#angular/router": "^4.3.2",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28",
"bootstrap": "^4.0.0-alpha.6",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"ngx-mydatepicker": "^2.0.12",
"rxjs": "^5.4.2",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.16"
},
"devDependencies": {
"#angular/cli": "^1.2.3",
"#angular/compiler-cli": "^4.3.2",
"#types/jasmine": "^2.5.53",
"#types/node": "^8.0.15",
"codelyzer": "^3.1.2",
"fs-extra": "^4.0.0",
"jasmine-core": "^2.6.4",
"jasmine-spec-reporter": "^4.1.1",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-coverage-istanbul-reporter": "^1.3.0",
"karma-jasmine": "^1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"kss": "^3.0.0-beta.18",
"protractor": "^5.1.2",
"random-ext": "^2.5.1",
"ts-node": "^3.2.1",
"tslint": "^5.5.0",
"typedoc": "^0.7.1",
"typescript": "^2.4.2"
}
}
try that and then reinstall all of your project's dependencies
rm ./package-lock.json
rm -r ./node_modules
npm cache clear --force
There is a full thread on github about it, since june I think
Since npm 5 you don't have full control over the cache, so for npm 5 you could try
npm cache verify
This helped me. I don't think you have to remove package-lock and node_modules as first step.
Should the cache clear method not work...
I found I had this problem during an OS X update. Installing the Command Line Tools update and restarting iTerm fixed this, incredibly enough.
Certainly not suggesting this is a "proper" solution but was definitely messing with my setup (wtf apple?). Posted in the event someone else viewing this is in the same position 💁🏼
You can try clearing your NPM cache using:
$ npm cache clear --force
Then re-install your node modules.
I hope this helps.
I got this error when using a custom registry (not npmjs.org). The problem was that my registry had gone down.
Before deleting your node_modules, check your internet connection - your provider might do some traffic shaping and blocking or slowing down the access to package repositories. You can spot that if you see something like Miscellaneous Warning ETIMEDOUT: [...] in your error messages.
This was the case for me, and the problem got resolved once I was using VPN.

npm install does not install nested dependancies

npm install is failing to install all nested dependencies (seemingly from a depth of 2 packages deep and beyond).
I suspected it might have something to do with one or more dependencies (e.g. bcrypt) which error on install and kill the npm process (despite themselves seeming to install successfully).
Running npm install again does not install all the dependencies and you have to manually invoke npm install <one of your packages>#<it's version number> which is a bad thing.
$ npm -v
2.14.12
Works fine on Mac OSX. Problem is on Ubuntu 14.04.4 LTS.
** Edit 1: package.json **
{
"name": "test",
"version": "0.0.0",
"description": "Test",
"main": "",
"scripts": {
},
"author": "",
"license": "ISC",
"dependencies": {
"bcrypt": "0.8.5",
"boom": "^3.1.2",
"deep-freeze": "0.0.1",
"good": "~6.4.0",
"good-console": "~5.2.0",
"hapi": "~11.1.2",
"hapi-auth-cookie": "^3.1.0",
"inert": "~3.2.0",
"iron": "^4.0.0",
"joi": "^8.0.4",
"jquery": "^2.1.1",
"kerberos": "0.0.17",
"lodash": "^3.10.1",
"moment": "^2.11.2",
"mysql": "^2.10.2",
"q": "~1.4.1",
"react": "0.14.6",
"react-dom": "0.14.6",
"react-redux": "4.0.6",
"react-router": "2.0.0-rc5",
"react-router-redux": "2.1.0",
"reduce-reducers": "0.1.1",
"redux": "^3.0.5",
"request": "2.69.0",
"sequelize": "git://github.com/ajamesphillips/sequelize.git",
"sparkpost": "^1.2.0"
}
}
I have upgraded the server from 0.5 Gb RAM to 2 Gb RAM and so far it seems npm install proceeds smoothly. Not certain that memory exhaustion was the problem. Will hopefully not report back but will do if it breaks again.
I'm fairly certain this was an issue with running out of memory. Will use egrep -i -r 'killed process' /var/log/ ( Finding which process was killed by Linux OOM killer ) next time I have this problem to see if OOM killer killed some of the processes launched by npm install.