Vercel deploy error: npm ERR! gyp verb extracted file from tarball node-v18.15.0/include/node/openssl

Question

I tried to deploy my github project into vercel. My project built with vue. Btw, while building project in vercel, it's got tons of errors like this.

npm ERR! gyp verb extracted file from tarball node-v18.15.0/include/node/openssl/archs/VC-WIN64A/asm_avx2/include/openssl/x509v3.h
npm ERR! gyp verb extracted file from tarball node-v18.15.0/include/node/openssl/archs/VC-WIN64A/asm_avx2/include/openssl/asn1.h
npm ERR! gyp verb extracted file from tarball node-v18.15.0/include/node/openssl/archs/VC-WIN64A/asm_avx2/include/openssl/safestack.h
npm ERR! gyp verb extracted file from tarball node-v18.15.0/include/node/openssl/archs/VC-WIN64A/asm_avx2/include/openssl/lhash.h

Here is screenshot of error of vercel. enter image description here

Here is content in package.json

{
  "name": "aali-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@emailjs/browser": "^3.11.0",
    "core-js": "^3.6.5",
    "isotope-layout": "^3.0.6",
    "jarallax": "^1.12.8",
    "node-sass": "^5.0.0",
    "parallax-js": "^3.1.0",
    "swiper": "^5.4.5",
    "vanilla-tilt": "^1.7.2",
    "vue": "^2.6.11",
    "vue-awesome-swiper": "^4.1.1",
    "vue-fragment": "^1.5.2",
    "vue-number-animation": "^1.1.1",
    "vue-router": "^3.2.0",
    "vue-visibility-sensor": "^0.3.0",
    "wowjs": "^1.1.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

It's compiled and run well locally. Do you know solution?

Thanks

Development Environment OS: windows 10 pro (19045.2965) Editor: VS code GitHub repository: Vercel deploy with my github account

Expecting result: Build and deploy successfully without error

Answer 1

I resolved this issue using yarn install instead of npm. Yarn is better to solve dependency issues than npm.

Its step is like following.

When you login with your account in vercel, you can go to Setting/General/Build & Development Settings.

Setting/General/Build & Development Settings You can see 4 input fields that was set disabled there. Please active override the 3rd one called Install Command and input yarn install. And click save button.

And try to redeploy in the deployments page. Normally, it will be solved normal dependency issues.

In my case, still happened the build error related gyp. I guess it will be related to node and node-sass version.

We can also change the node version in the vercel. Go to Setting/General/Node.js version. You can see node version of your website. Node version setting

In my case, node version was 18 and node-sass version in the package.json was 5.0.0. So, they didn't match each other. I changed the node as 16.x and node-sass updated as 6.0.0 And deployed again.

Ya!. it works. Deployment successfully