vue.js - How to fix this node-sass build error on Netlify?

Question

I've done this many times in the past, I'm getting this error in the netlify logs. The repo I am attempting to deploy is https://github.com/yanyamz/Key_Visual_Arts.

I checked to see if it was within size limitations of Netlify and it is, totally 15mb or so vs the 20+mb that you can deploy on netlify.

12:03:03 PM: Build ready to start
12:03:04 PM: build-image version: fa439ad1ab9393b2c0d449d8d7c033927683f4b0
12:03:04 PM: build-image tag: v4.3.0
12:03:04 PM: buildbot version: 0f2f658d862cfe72bae7cc05c6a8de0426a5a0e2
12:03:04 PM: Fetching cached dependencies
12:03:05 PM: Failed to fetch cache, continuing with build
12:03:05 PM: Starting to prepare the repo for build
12:03:05 PM: No cached dependencies found. Cloning fresh repo
12:03:05 PM: git clone https://github.com/yanyamz/Key_Visual_Arts
12:03:07 PM: Preparing Git Reference refs/heads/main
12:03:07 PM: Parsing package.json dependencies
12:03:08 PM: 
?
? Initial build environment
baseRelDir: true
branch: main
context: production
cwd: /opt/build/repo
featureFlags: []
mode: buildbot
repositoryRoot: /opt/build/repo
siteId: 9cc686ee-a337-4ebf-886c-99acf9adfe45
?
? UI build settings
baseRelDir: true
build:
  command: npm run build
  environment:
    - NETLIFY_BUILD_DEBUG
  publish: dist
?
? Resolved build environment
branch: main
buildDir: /opt/build/repo
context: production
env: []
?
? Resolved config
build:
  command: npm run build
  commandOrigin: ui
  environment:
    - NETLIFY_BUILD_DEBUG
  publish: /opt/build/repo/dist
  publishOrigin: ui

12:03:08 PM: Starting build script
12:03:08 PM: Installing dependencies
12:03:08 PM: Python version set to 2.7
12:03:09 PM: Downloading and installing node v16.8.0...
12:03:09 PM: Downloading https://nodejs.org/dist/v16.8.0/node-v16.8.0-linux-x64.tar.xz...
12:03:09 PM: Computing checksum with sha256sum
12:03:09 PM: Checksums matched!
12:03:12 PM: Now using node v16.8.0 (npm v7.21.0)
12:03:12 PM: Started restoring cached build plugins
12:03:12 PM: Finished restoring cached build plugins
12:03:12 PM: Attempting ruby version 2.7.2, read from environment
12:03:13 PM: Using ruby version 2.7.2
12:03:14 PM: Using PHP version 8.0
12:03:14 PM: Started restoring cached node modules
12:03:14 PM: Finished restoring cached node modules
12:03:14 PM: Installing NPM modules using NPM version 7.21.0
12:03:16 PM: npm WARN old lockfile
12:03:16 PM: npm WARN old lockfile The package-lock.json file was created with an old version of npm,
12:03:16 PM: npm WARN old lockfile so supplemental metadata must be fetched from the registry.
12:03:16 PM: npm WARN old lockfile
12:03:16 PM: npm WARN old lockfile This is a one-time fix-up, please be patient...
12:03:16 PM: npm WARN old lockfile
12:03:18 PM: npm WARN old lockfile vue-loader-v16: No matching version found for [email protected].
12:03:18 PM: npm WARN old lockfile     at module.exports (/opt/buildhome/.nvm/versions/node/v16.8.0/lib/node_modules/npm/node_modules/npm-pick-manifest/index.js:209:23)
12:03:18 PM: npm WARN old lockfile     at /opt/buildhome/.nvm/versions/node/v16.8.0/lib/node_modules/npm/node_modules/pacote/lib/registry.js:118:26
12:03:18 PM: npm WARN old lockfile     at async Array.<anonymous> (/opt/buildhome/.nvm/versions/node/v16.8.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:691:9)
12:03:18 PM: npm WARN old lockfile  Could not fetch metadata for [email protected] vue-loader-v16: No matching version found for [email protected].
12:03:18 PM: npm WARN old lockfile     at module.exports (/opt/buildhome/.nvm/versions/node/v16.8.0/lib/node_modules/npm/node_modules/npm-pick-manifest/index.js:209:23)
12:03:18 PM: npm WARN old lockfile     at /opt/buildhome/.nvm/versions/node/v16.8.0/lib/node_modules/npm/node_modules/pacote/lib/registry.js:118:26
12:03:18 PM: npm WARN old lockfile     at async Array.<anonymous> (/opt/buildhome/.nvm/versions/node/v16.8.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:691:9) {
12:03:18 PM: npm WARN old lockfile   code: 'ETARGET',
12:03:18 PM: npm WARN old lockfile   type: 'version',
12:03:18 PM: npm WARN old lockfile   wanted: '16.5.0',
12:03:18 PM: npm WARN old lockfile   versions: [
12:03:18 PM: npm WARN old lockfile     '16.0.0-beta.5',
12:03:18 PM: npm WARN old lockfile     '16.0.0-beta.5.1',
12:03:18 PM: npm WARN old lockfile     '16.0.0-beta.5.2',
12:03:18 PM: npm WARN old lockfile     '16.0.0-beta.5.3',
12:03:18 PM: npm WARN old lockfile     '16.0.0-beta.5.4'
12:03:18 PM: npm WARN old lockfile   ],
12:03:18 PM: npm WARN old lockfile   distTags: { latest: '16.0.0-beta.5.4' },
12:03:18 PM: npm WARN old lockfile   defaultTag: 'latest'
12:03:18 PM: npm WARN old lockfile }
12:03:33 PM: npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
12:03:33 PM: npm WARN deprecated [email protected]: this library is no longer supported
12:03:33 PM: npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
12:03:34 PM: npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
12:03:35 PM: npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
12:03:37 PM: npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
12:03:38 PM: npm WARN deprecated [email protected]: This loader has been deprecated. Please use eslint-webpack-plugin
12:03:39 PM: npm WARN deprecated [email protected]: 3.x is no longer supported
12:03:40 PM: npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
12:03:40 PM: npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
12:03:40 PM: npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
12:03:41 PM: npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
12:03:42 PM: npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
12:03:42 PM: npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
12:03:42 PM: npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
12:03:43 PM: npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
12:03:43 PM: npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
12:06:00 PM: npm ERR! code 1
12:06:00 PM: npm ERR! path /opt/build/repo/node_modules/node-sass
12:06:00 PM: npm ERR! command failed
12:06:00 PM: npm ERR! command sh -c node scripts/build.js
12:06:00 PM: npm ERR! Building: /opt/buildhome/.nvm/versions/node/v16.8.0/bin/node /opt/build/repo/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
12:06:00 PM: npm ERR! make: Entering directory '/opt/build/repo/node_modules/node-sass/build'
12:06:00 PM: npm ERR!   g++ '-DNODE_GYP_MODULE_NAME=libsass' '-DUSING_UV_SHARED=1' '-DUSING_V8_SHARED=1' 

Answer 1

Stop using node-sass

1. it is native node package, which means it requires some build tools to be installed in some environments (prebuild binaries for some OS/environments are distributed in NPM package but obviously not for one used by netlify)

2. On top of that it is already deprecated

Just uninstall node-sass and install sass - sass-loader should switch to it automatically