TypeError: sass.sync is not a function

[llimllib]

In order to get gulp init to work, I had to undo a change from #37, specifically this change.

To reproduce:

reproduction instructions

# USWDS doesn't work with a modern node version: https://github.com/uswds/uswds-gulp/issues/40
# so I'll build with an old version I guess. Computers.
#
# set our local nodejs to an old version capable of installing uswds-gulp
asdf local nodejs ref:v14.17.0

npm init
npm install --save uswds@latest
npm install -g gulp
asdf reshim
npm install autoprefixer gulp gulp-replace sass gulp-sass gulp-sourcemaps gulp-rename gulp-svg-sprite gulp-postcss postcss postcss-csso uswds uswds-gulp@github:uswds/uswds-gulp --save-dev

# copy the gulpfile and browserslist as instructed
cp node_modules/uswds-gulp/gulpfile.js .
cp node_modules/uswds-gulp/.browserslistrc .

# make a bunch of dirs for saving the output
mkdir -p dist/{sass,js,css,img,fonts}

# Update the gulpfile with paths:

----------------------------
// Project Sass source directory
const PROJECT_SASS_SRC = "./dist/sass";

// Images destination
const IMG_DEST = "./dist/img";

// Fonts destination
const FONTS_DEST = "./dist/fonts";

// Javascript destination
const JS_DEST = "./dist/js";

// Compiled CSS destination
const CSS_DEST = "./dist/css";

// Site CSS destination
// Like the _site/assets/css directory in Jekyll, if necessary.
// If using, uncomment line 106
// const SITE_CSS_DEST = "./path/to/site/css/destination";
----------------------------

gulp init

And that gulp init outputs:

$ gulp init
[21:04:56] Using gulpfile ~/adhoc/agency.adhoc.team/customcss/gulpfile.js
[21:04:56] Starting 'init'...
[21:04:56] Starting 'copy-uswds-setup'...
[21:04:56] Finished 'copy-uswds-setup' after 31 ms
[21:04:56] Starting 'copy-uswds-fonts'...
[21:04:56] Finished 'copy-uswds-fonts' after 78 ms
[21:04:56] Starting 'copy-uswds-images'...
[21:04:56] Finished 'copy-uswds-images' after 487 ms
[21:04:56] Starting 'copy-uswds-js'...
[21:04:56] Finished 'copy-uswds-js' after 5.6 ms
[21:04:56] Starting 'build-sass'...
[21:04:56] 'build-sass' errored after 1.62 ms
[21:04:56] TypeError: sass.sync is not a function
    at /Users/llimllib/adhoc/agency.adhoc.team/customcss/gulpfile.js:97:14
    at build-sass (/Users/llimllib/adhoc/agency.adhoc.team/customcss/node_modules/undertaker/lib/set-task.js:13:15)
    at bound (domain.js:416:15)
    at runBound (domain.js:427:12)
    at asyncRunner (/Users/llimllib/adhoc/agency.adhoc.team/customcss/node_modules/async-done/index.js:55:18)
    at processTicksAndRejections (internal/process/task_queues.js:77:11)
[21:04:56] 'init' errored after 604 ms

The only change I had to make to get gulp init building was rolling line 20 back to const sass = require("gulp-sass");

[mejiaj]

We're using the recommended guidance outlined here
https://github.com/dlmanning/gulp-sass#render-your-css

What does your gulp file look like?

[llimllib]

I left detailed repro instructions in the "reproduction instructions" section above (not being snarky, it's collapsed and you might not have noticed it).

This is with the default gulpfile, the only thing I changed was to update the paths as instructed

[amstaker]

I can confirm and I was able to reproduce the problem. Line 20 definitely should be updated to:

const sass = require("gulp-sass");

Here is the entire file, btw I also think it's sort of silly that the source directory settings are not just standardized and included with the paths ./assets/sass... etc which makes much more sense and will at least allow for an initial compilation. For new and/or inexperienced users it's easy to get this wrong, or at least include a recommended default in the files.

/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS SASS GULPFILE
----------------------------------------
*/

const autoprefixer = require("autoprefixer");
const csso = require("postcss-csso");
const gulp = require("gulp");
const pkg = require("./node_modules/uswds/package.json");
const postcss = require("gulp-postcss");
const replace = require("gulp-replace");
const sass = require("gulp-sass");
const sourcemaps = require("gulp-sourcemaps");
const uswds = require("./node_modules/uswds-gulp/config/uswds");
const del = require("del");
const svgSprite = require("gulp-svg-sprite");
const rename = require("gulp-rename");

/*
----------------------------------------
PATHS
----------------------------------------
- All paths are relative to the
  project root
- Don't use a trailing `/` for path
  names
----------------------------------------
*/

// Project Sass source directory
const PROJECT_SASS_SRC = "./assets/sass";

// Images destination
const IMG_DEST = "./assets/img";

// Fonts destination
const FONTS_DEST = "./assets/fonts";

// Javascript destination
const JS_DEST = "./assets/js";

// Compiled CSS destination
const CSS_DEST = "./assets/css";

// Site CSS destination
// Like the _site/assets/css directory in Jekyll, if necessary.
// If using, uncomment line 106
const SITE_CSS_DEST = "./path/to/site/css/destination";

/*
----------------------------------------
TASKS
----------------------------------------
*/

gulp.task("copy-uswds-setup", () => {
  return gulp
    .src(`${uswds}/scss/theme/**/**`)
    .pipe(gulp.dest(`${PROJECT_SASS_SRC}`));
});

gulp.task("copy-uswds-fonts", () => {
  return gulp.src(`${uswds}/fonts/**/**`).pipe(gulp.dest(`${FONTS_DEST}`));
});

gulp.task("copy-uswds-images", () => {
  return gulp.src(`${uswds}/img/**/**`).pipe(gulp.dest(`${IMG_DEST}`));
});

gulp.task("copy-uswds-js", () => {
  return gulp.src(`${uswds}/js/**/**`).pipe(gulp.dest(`${JS_DEST}`));
});

gulp.task("build-sass", function (done) {
  var plugins = [
    // Autoprefix
    autoprefixer({
      cascade: false,
      grid: true,
    }),
    // Minify
    csso({ forceMediaMerge: false }),
  ];
  return (
    gulp
      .src([`${PROJECT_SASS_SRC}/*.scss`])
      .pipe(sourcemaps.init({ largeFile: true }))
      .pipe(
        sass.sync({
          includePaths: [
            `${PROJECT_SASS_SRC}`,
            `${uswds}/scss`,
            `${uswds}/scss/packages`,
          ],
        })
      )
      .pipe(replace(/\buswds @version\b/g, "based on uswds v" + pkg.version))
      .pipe(postcss(plugins))
      .pipe(sourcemaps.write("."))
      // uncomment the next line if necessary for Jekyll to build properly
      //.pipe(gulp.dest(`${SITE_CSS_DEST}`))
      .pipe(gulp.dest(`${CSS_DEST}`))
  );
});

// SVG sprite configuration
config = {
  shape: {
    dimension: {
      // Set maximum dimensions
      maxWidth: 24,
      maxHeight: 24,
    },
    id: {
      separator: "-",
    },
    spacing: {
      // Add padding
      padding: 0,
    },
  },
  mode: {
    symbol: true, // Activate the «symbol» mode
  },
};

gulp.task("build-sprite", function (done) {
  gulp
    .src(`${IMG_DEST}/usa-icons/**/*.svg`, {
      allowEmpty: true,
    })
    .pipe(svgSprite(config))
    .on("error", function (error) {
      console.log("There was an error");
    })
    .pipe(gulp.dest(`${IMG_DEST}`))
    .on("end", function () {
      done();
    });
});

gulp.task("rename-sprite", function (done) {
  gulp
    .src(`${IMG_DEST}/symbol/svg/sprite.symbol.svg`, {
      allowEmpty: true,
    })
    .pipe(rename(`${IMG_DEST}/sprite.svg`))
    .pipe(gulp.dest(`./`))
    .on("end", function () {
      done();
    });
});

gulp.task("clean-sprite", function (cb) {
  cb();
  return del.sync(`${IMG_DEST}/symbol`);
});

gulp.task(
  "init",
  gulp.series(
    "copy-uswds-setup",
    "copy-uswds-fonts",
    "copy-uswds-images",
    "copy-uswds-js",
    "build-sass"
  )
);

gulp.task("watch-sass", function () {
  gulp.watch(`${PROJECT_SASS_SRC}/**/*.scss`, gulp.series("build-sass"));
});

gulp.task("watch", gulp.series("build-sass", "watch-sass"));

gulp.task("default", gulp.series("watch"));

gulp.task(
  "svg-sprite",
  gulp.series("build-sprite", "rename-sprite", "clean-sprite")
);

[tinyCoder32]

Is there any solution yet for this issue?

[runarbu]

@tinyCoder32 I was able to get this working for me by changing:
const sass = require('gulp-sass');
to
const sass = require("gulp-sass")(require('sass'));

as suggested by bsang at #36

My gulp an node versions:

gulp -v
CLI version: 2.3.0
Local version: 4.0.2

node -v
v16.19.0 

[mejiaj]

Just a heads up, we developed a new tool USWDS/Compile (hosted on NPM).

USWDS-Gulp isn't under active development anymore.