npm install fails

[thpglobal]

With node v16.4.1 and npm 7.18.1 it gets as far as node_modules/node-sass and fails with sh -c node scripts/build.js and then streams pages of errors starting with:
npm ERR! code 1
npm ERR! path /home/johncoonrod/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /usr/bin/node /home/johncoonrod/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! make: Entering directory '/home/johncoonrod/node_modules/node-sass/build'
npm ERR! g++ '-DNODE_GYP_MODULE_NAME=libsass' '-DUSING_UV_SHARED=1' '-DUSING_V8_SHARED=1' '-DV8_DEPRECATION_WARNINGS=1' '-DV8_DEPRECATION_WARNINGS' '-DV8_IMMINENT_DEPRECATION_WARNINGS' '-D_GLIBCXX_USE_CXX11_ABI=1' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-D__STDC_FORMAT_MACROS' '-DOPENSSL_NO_PINSHARED' '-DOPENSSL_THREADS' '-DLIBSASS_VERSION="3.5.5"' -I/home/johncoonrod/.node-gyp/16.4.1/include/node -I/home/johncoonrod/.node-gyp/16.4.1/src -I/home/johncoonrod/.node-gyp/16.4.1/deps/openssl/config -I/home/johncoonrod/.node-gyp/16.4.1/deps/openssl/openssl/include -I/home/johncoonrod/.node-gyp/16.4.1/deps/uv/include

[DanielRSnell]

@thpglobal, I had the same issue, and even though this post is older, I want to share an entertaining and comprehensive solution for anyone who stumbles upon this fantastic project and encounters a similar problem! 🚀⚡️

First, clean up your workspace with this command:
sudo rm -r node_modules *-lock.json

Now, let's dive into the three common reasons for the error:

If you're on a non-INTEL/AMD MacOS, blast off straight to step 3 🚀

1. Python versions and PATH troubles 🐍

• Install the latest Python version by following instructions on their website, then update your ${PATH} accordingly.

2. Node version mismatch 🌳

• Run nvm ls-remote to see available Node versions and your active one.
• Install Node versions 14, 16, and the current LTS with nvm install 14 && nvm install 16 && nvm install lts.
• Use Node 16 with nvm use 16 for compatibility with WP Core.

Try running npm install now. If the issue was Node-related, you'll just see some peer dependency warnings, but everything will work.

3. ARM64 Environment Issue (non-intel/amd Mac or Linux) 🖥️

• Remove node_modules and lock file: rm -r node_modules *-lock.json
• Get rid of node-sass: pnpm remove node-sass or npm uninstall node-sass
• Install Dart Sass for ARM64 compatibility: <command> add sass

Update your Webpack config file, ./config/<env>.config, with the following example:

// Common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    /*... existing loaders ...*/
  ];
  if (preProcessor) {
    loaders.push({
      loader: require.resolve(preProcessor),
      options: {
        implementation: preProcessor === 'sass-loader' ? require('sass') : undefined, // Use Dart Sass if preProcessor is sass-loader
      },
    });
  }
  return loaders;
};

Ensure there's no mention of node-sass in the config. Dart Sass will now take over!

Run <command> install, and you're all set! 🎉

If everything boots up successfully, update the scripts from @wordpress/gutenberg latest with <command> g-update or node ./scripts/g-update.js. Grab the vendor files from the newly created ./tmp folder and replace them in ./public/gutenberg/vendor. You should be good to go! 🚀

Fix any minor issues by running the console and troubleshooting accordingly. Enjoy your journey!