Cannot install due to node-sass

[Designer023]

• I've read and understood the contribution guidelines.
• I've searched for any related issues and avoided creating a duplicate issue.

Please give us a description of what happened

Installing yoastseo runs into issue with node-sass and python 2 due to gyp. node-sass is depreciated, so would it be possible to look at updating this to use dart sass as per the official docs.

To Reproduce

Step-by-step reproduction instructions

1. M1 mac, or Intel mac (using Big Sur)
2. create npm project npm init -y
3. Install package: npm install yoastseo

Expected results

1. Package to install

Actual results

...snip
npm ERR! gyp info it worked if it ends with ok
  npm ERR! gyp verb cli [
  npm ERR! gyp verb cli   '/Users/username/.nvm/versions/node/v16.11.0/bin/node',
  npm ERR! gyp verb cli   '/Users/username/Sites/tmp/node_modules/node-gyp/bin/node-gyp.js',
  npm ERR! gyp verb cli   'rebuild',
  npm ERR! gyp verb cli   '--verbose',
  npm ERR! gyp verb cli   '--libsass_ext=',
  npm ERR! gyp verb cli   '--libsass_cflags=',
  npm ERR! gyp verb cli   '--libsass_ldflags=',
  npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.11.0 | darwin | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` succeeded python2 /usr/bin/python2
npm ERR! gyp verb check python version `/usr/bin/python2 -c "import sys; print "2.7.16
npm ERR! gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 16.11.0
npm ERR! gyp verb command install [ '16.11.0' ]
npm ERR! gyp verb install input version string "16.11.0"
npm ERR! gyp verb install installing version: 16.11.0
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version is already installed, need to check "installVersion"
npm ERR! gyp verb got "installVersion" 9
npm ERR! gyp verb needs "installVersion" 9
npm ERR! gyp verb install version is good
npm ERR! gyp verb get node dir target node version installed: 16.11.0
npm ERR! gyp verb build dir attempting to create "build" dir: /Users/username/Sites/tmp/node_modules/yoastseo/node_modules/node-sass/build
npm ERR! gyp verb build dir "build" dir needed to be created? /Users/username/Sites/tmp/node_modules/yoastseo/node_modules/node-sass/build
npm ERR! gyp verb build/config.gypi creating config file
npm ERR! gyp verb build/config.gypi writing out config file: /Users/username/Sites/tmp/node_modules/yoastseo/node_modules/node-sass/build/config.gypi
npm ERR! (node:23633) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
  npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! gyp verb config.gypi checking for gypi file: /Users/username/Sites/tmp/node_modules/yoastseo/node_modules/node-sass/config.gypi
npm ERR! gyp verb common.gypi checking for gypi file: /Users/username/Sites/tmp/node_modules/yoastseo/node_modules/node-sass/common.gypi
npm ERR! gyp verb gyp gyp format was not specified; forcing "make"
npm ERR! gyp info spawn /usr/bin/python2
npm ERR! gyp info spawn args [
  npm ERR! gyp info spawn args   '/Users/username/Sites/tmp/node_modules/node-gyp/gyp/gyp_main.py',
  npm ERR! gyp info spawn args   'binding.gyp',
  npm ERR! gyp info spawn args   '-f',
  npm ERR! gyp info spawn args   'make',
  npm ERR! gyp info spawn args   '-I',
  npm ERR! gyp info spawn args   '/Users/username/Sites/tmp/node_modules/yoastseo/node_modules/node-sass/build/config.gypi',
  npm ERR! gyp info spawn args   '-I',
  npm ERR! gyp info spawn args   '/Users/username/Sites/tmp/node_modules/node-gyp/addon.gypi',
  npm ERR! gyp info spawn args   '-I',
  npm ERR! gyp info spawn args   '/Users/username/.node-gyp/16.11.0/include/node/common.gypi',
  npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
  npm ERR! gyp info spawn args   '-Dvisibility=default',
  npm ERR! gyp info spawn args   '-Dnode_root_dir=/Users/username/.node-gyp/16.11.0',
  npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/Users/username/Sites/tmp/node_modules/node-gyp',
  npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/username/.node-gyp/16.11.0/<(target_arch)/node.lib',
  npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Users/username/Sites/tmp/node_modules/yoastseo/node_modules/node-sass',
  npm ERR! gyp info spawn args   '-Dnode_engine=v8',
  npm ERR! gyp info spawn args   '--depth=.',
  npm ERR! gyp info spawn args   '--no-parallel',
  npm ERR! gyp info spawn args   '--generator-output',
  npm ERR! gyp info spawn args   'build',
  npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp verb command build []
npm ERR! gyp verb build type Release
npm ERR! gyp verb architecture x64
npm ERR! gyp verb node dev dir /Users/username/.node-gyp/16.11.0
npm ERR! gyp verb `which` succeeded for `make` /usr/bin/make
  npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'V=1', 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! In file included from ../src/libsass/src/ast.cpp:2:
npm ERR! ../src/libsass/src/ast.hpp:1614:25: warning: loop variable 'numerator' creates a copy from type 'const std::string' [-Wrange-loop-construct]
npm ERR!         for (const auto numerator : numerators)
npm ERR!                         ^
npm ERR! ../src/libsass/src/ast.hpp:1614:14: note: use reference type 'const std::string &' to prevent copying
npm ERR!         for (const auto numerator : numerators)
npm ERR!              ^~~~~~~~~~~~~~~~~~~~~~
  npm ERR!                         &
npm ERR! ../src/libsass/src/ast.hpp:1616:25: warning: loop variable 'denominator' creates a copy from type 'const std::string' [-Wrange-loop-construct]
npm ERR!         for (const auto denominator : denominators)
npm ERR!                         ^
npm ERR! ../src/libsass/src/ast.hpp:1616:14: note: use reference type 'const std::string &' to prevent copying
npm ERR!         for (const auto denominator : denominators)
npm ERR!              ^~~~~~~~~~~~~~~~~~~~~~~~
  npm ERR!                         &
...snip

[monbauza]

Possibly related issues:

• P1-1235 remove node sass from style guide package #18144
• P1-1236 remove node sass from yoast components #18170
• Internal conversation

[mmikhan]

👋 @Designer023 sorry to hear that you're having the issue with installing the package through NPM. Unfortunately, the NPM package is very outdated and hasn't been updated for quite a while. So, the best workaround is to install the package directly through this GitHub repository npm. However, that doesn't mean we're not considering to update NPM package. We are already looking into it but don't have an ETA at this point.