Errors on running npm install in subtheme on Node 16+

Patch #2 works also for Ubuntu 20.04 LTS

Patch #2 makes npm install work without errors (but with deprecation and vulnerability messages) also on Ubuntu 20.04 LTS.

Tested with:

$ node --version
v16.13.2

Node v16 is currently the Active LTS version.

$ composer show drupal/bootstrap_sass
versions : * 5.0.5

$ composer show drupal/bootstrap_barrio
versions : * 5.5.4

$ composer show drupal/core-recommended
versions : * 9.3.3

$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 20.04.3 LTS
Release:	20.04
Codename:	focal

(On Ubuntu 20.04 the errors were different than in this issue.)

The errors were of different kind on Ubuntu. Good though, that your patch made npm install work also on Ubuntu!

The minimal working approach is probably a good idea. It implies less testing and thereby less time expenditure for the maintainers. Maybe upgrading other packages would also need code changes in the bootstrap_sass module.

I guess it would be a better idea to create a separate issue for updating all packages. That way the Category, Priority, Status etc flags can be set here for 'getting it working at all' and in the other issue for the 'upgrade-all case' and also discussion about needs of code changes in this Drupal module, if any.

Thanks, good to know!

Then maybe you could post that patch here in this issue. I would test it too and report back. That way the maintainers could choose to use that new patch or the patch from #2, as they like.

Maybe also change the Title (to point to the issue core and to get more attention from the maintainers) to something like:

npm install fails - with Active LTS version v16 of Node

Quote from Node Releases page:

...even-numbered releases (10, 12, etc.) move to Active LTS status and are ready for general use. LTS release status is "long-term support", which typically guarantees that critical bugs will be fixed for a total of 30 months. Production applications should only use Active LTS or Maintenance LTS releases.

Thanks for the new versions! I tested them and everything worked the same as with #2 patch.

I was hoping that the incredibly slow 'styles' task would quicken up, but it did not.

Finished 'styles' after 22 s
Finished 'js' after 288 ms

To speed up ‘styles’ step you can try to move autoprefixer gulp pass into post-css sub task - it will process css as one pass along with other post-css plugins…

// PostCss processor plugins
const postcssInlineSvg = require('postcss-inline-svg');
const postcssPxToRem = require('postcss-pxtorem');
const autoprefixer = require('autoprefixer');
const postcssProcessors = [
  postcssInlineSvg({
    removeFill: true,
    paths: ['./node_modules/bootstrap-icons/icons']
  }),
  postcssPxToRem({
    propList: ['font', 'font-size', 'line-height', 'letter-spacing', '*margin*', '*padding*'],
    mediaQuery: true
  }),
  autoprefixer({
    cascade: true
  })
];

// Compile sass into CSS & auto-inject into browsers
function styles () {
  return gulp.src([paths.scss.bootstrap, paths.scss.src])
    .pipe(gulpPlugins.sourcemaps.init())
    .pipe(sass({
        includePaths: [
          './node_modules/bootstrap/scss',
          '../../contrib/bootstrap_barrio/scss'
        ]
      }).on('error', sass.logError))
    .on('error', function (error) {
      process.exitCode = 1;
    })
    .pipe(gulpPlugins.postcss(postcssProcessors))
    .pipe(gulpPlugins.sourcemaps.write('./'))
    .pipe(gulp.dest(paths.scss.dest))
    .pipe(gulpPlugins.cleanCss({ sourceMap: true }))
    .pipe(gulpPlugins.rename({ suffix: '.min' }))
    .pipe(gulp.dest(paths.scss.dest))
    .pipe(browserSync.stream());
}

But I have not seen it radically improved in speed…. And requires more bumps in devDependancy versions.
My current ‘style’ task run for 12 seconds on free layer of CircleCI pipes… but my overrides are pretty simple.

Thanks Maxim!

My styles function went down from 22 seconds to 15-17 seconds.

Finished 'styles' after 17 s
Finished 'js' after 74 ms

Of course, it is still way too long time. Would be nice to get it down to a second or so.

I moved the autoprefixer like this:

let gulp = require('gulp'),
  sass = require('gulp-sass')(require('sass')),
  sourcemaps = require('gulp-sourcemaps'),
  $ = require('gulp-load-plugins')(),
  cleanCss = require('gulp-clean-css'),
  rename = require('gulp-rename'),
  postcss = require('gulp-postcss'),
  autoprefixer = require('autoprefixer'),
  postcssInlineSvg = require('postcss-inline-svg'),
  browserSync = require('browser-sync').create()
  pxtorem = require('postcss-pxtorem'),
  postcssProcessors = [
    postcssInlineSvg({
      removeFill: true,
      paths: ['./node_modules/bootstrap-icons/icons']
    }),
    pxtorem({
      propList: ['font', 'font-size', 'line-height', 'letter-spacing', '*margin*', '*padding*'],
      mediaQuery: true
    }),
    autoprefixer({                  <- Pasted in from here...
      browsers: [
        'Chrome >= 35',
        'Firefox >= 38',
        'Edge >= 12',
        'Explorer >= 10',
        'iOS >= 8',
        'Safari >= 8',
        'Android 2.3',
        'Android >= 4',
        'Opera >= 12']
    })                               <- ...to here.
  ];

// Code irrelevant for this issue here

// Compile sass into CSS & auto-inject into browsers
function styles () {
  return gulp.src([paths.scss.bootstrap, paths.scss.src])
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: [
        './node_modules/bootstrap/scss',
        '../../contrib/bootstrap_barrio/scss'
      ]
    }).on('error', sass.logError))
    .pipe($.postcss(postcssProcessors))
    // .pipe(postcss([autoprefixer({        <- commented out from here...
    //   browsers: [
    //     'Chrome >= 35',
    //     'Firefox >= 38',
    //     'Edge >= 12',
    //     'Explorer >= 10',
    //     'iOS >= 8',
    //     'Safari >= 8',
    //     'Android 2.3',
    //     'Android >= 4',
    //     'Opera >= 12']
    // })]))                                  <- ...to here
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.scss.dest))
    //.pipe(cleanCss())
    //.pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(paths.scss.dest))
    .pipe(browserSync.stream())
}

I tried with fewer browsers also, but the 'styles' did not get faster.

    autoprefixer({
      browsers: [
        'Chrome >= 94',
        'Firefox >= 93',
        'Edge >= 12',
        //'Explorer >= 10',
        'iOS >= 12',
        'Safari >= 12',
        //'Android 2.3',
        'Android >= 9',
        'Opera >= 80']
    })
  ];

+1 for the patch in #2. This also solved my problem with a failed installation.

Thank you - patch #2 also fixed my problem installing on a new m1 mac

Same here patch #2 worked for me, also on an M1 Mac.

The main difference is some deprecation warnings, most similar to:

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 4) or calc($spacer / 4)

These appear to be changes that will need to be made in bootstrap_barrio's sass files - seems like a great issue for a newbie :)

-mike

Path #2 also fixed problems on my mac (no M1) with Big Sur installed

I ran into this on a new non-M1 mac using DDEV. Node v16 is installed by default. Fix was to add the following line to my .ddev/config.yml:

nodejs_version: "14"

Restarted the project and ran though install commands again and it worked for an existing theme.

Hi,
on Fedora 36
Python 3.10
Node 18

patch #2 solved the issue
and npm install works fine

Patch #2 worked for me on my Ubuntu 20.04 dev laptop with
node v16.14.2
npm v8.5.0

Thanks to @hussainweb !

Any chances this finally get merged and can be installed via composer?
thanks

+1 Patch #2 works also for Ubuntu 20.04 LTS node version 16.16.0. Thank you.

Hi, I try to get gulp running on a Mac M3. I tried the old approach using patch from #2. But I can't get it to work.
Can anyone give a quick step by step on how to make gulp work on a Mac with M3 processor?
NPM version?
NODE version?
Python version?
...

Thank you so much!