node-sass not compatible with newer versions of node, such as 14 and 16

[seanrasmussen]

Bug Report

I installed node version 14.17.5 (using nvm) and the wpgulp script does not complete a build uisng "npm start" anymore. Error: Cannot find module 'fs/promises' .

Apparently node-sass is deprecated and incompatible with the latest node versions.

Expected Behavior

Expected the script to complete.

Actual Behavior

Script produces error.

Steps to Reproduce

1. switch to node 14.17.5
2. run npm start

1. node -v: 14.17.5
2. npm -v: 6.14.14

Then, specify:

1. Operating system: Ubuntu 18.04

Possible Solution
find an alternate to node-sass? maybe dart-sass?

[jdoubleya1]

+1 on this. It's unusable on newer versions of node/npm.

[seanrasmussen]

I managed to get the gulp setup working with more recent node versions by updating to the latest gulp-sass, and by adding sass as a dependency, as outlined in the gulp-sass docs, like so:

var sass = require('gulp-sass')(require('sass'));
See the section "Migrating to version 5" https://www.npmjs.com/package/gulp-sass

[jeffceriello]

Hi @seanrasmussen, could you please let me know what you did exactly to make it work? I am using node version 17.0.1, gulp-sass version 7.0.0 but when I then run npm install I still get a command failed on node-sass. Thanks

[seanrasmussen]

Hi @jeffceriello

If you're getting a node-sass error, that's because the new version of gulp-sass doesn't include node-sass anymore. What you want to do is swap out node-sass, for plain ol' sass.

Update your gulp-sass to the latest stable version.

Add sass to your project:
npm install sass --save
then change the line where you require sass in gulpfile.babel.js
FROM

const sass = require('gulp-sass'); // Gulp plugin for Sass compilation.
TO

const sass = require('gulp-sass')(require('sass')); // Gulp plugin for Sass compilation.

That brings in SASS, and the rest is the same. Note that for some things the sass package has some different options than node-sass, like for "compacted" vs "expanded" etc... So, follow the errors and make any changes required... I can't remember off-hand what those changes are. I've been meaning to fork WPGulp and provide it publicly, but haven't got around to it yet...

I hope that helps. I'll try and fork the repo sometime soon and update this thread.

Note that on projects where I haven't updated my gulp config yet, I just use NVM to switch to node 12 and WpGulp works like normal. That's easier, and you may not need the latest version of Node for a WordPress project...

[jeffceriello]

Hi @seanrasmussen that's all clear, thank you so much for this really exhaustive answer!

[shawnstom523]

Hi @jeffceriello

If you're getting a node-sass error, that's because the new version of gulp-sass doesn't include node-sass anymore. What you want to do is swap out node-sass, for plain ol' sass.

Update your gulp-sass to the latest stable version.

Add sass to your project: npm install sass --save then change the line where you require sass in gulpfile.babel.js FROM

const sass = require('gulp-sass'); // Gulp plugin for Sass compilation. TO

const sass = require('gulp-sass')(require('sass')); // Gulp plugin for Sass compilation.

That brings in SASS, and the rest is the same. Note that for some things the sass package has some different options than node-sass, like for "compacted" vs "expanded" etc... So, follow the errors and make any changes required... I can't remember off-hand what those changes are. I've been meaning to fork WPGulp and provide it publicly, but haven't got around to it yet...

I hope that helps. I'll try and fork the repo sometime soon and update this thread.

Note that on projects where I haven't updated my gulp config yet, I just use NVM to switch to node 12 and WpGulp works like normal. That's easier, and you may not need the latest version of Node for a WordPress project...

I tried updating to sass from gulp-sass per your recommendation and I still get the node-sass error