gulp autoprefixer giving me a promise error

Question

I tried this solution from Gulp Autoprefixer Not Working but it's not working out for me.

The code that I used is:

"use strict";

var gulp = require('gulp');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var plumber = require('gulp-plumber');

function onError(err) {
    console.log(err);
}

gulp.task('sass', function(){
    return gulp.src('src/style.scss')
        .pipe(sass())
        .pipe(prefix({browsers:['last 2 versions']}))
        .pipe(minify())
        .pipe(gulp.dest('css/'))
        .pipe(plumber({
            errorHandler: onError
        }))
});

I'm getting this error message:

/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:152
        this.processing = new Promise(function (resolve, reject) {
                              ^
ReferenceError: Promise is not defined
    at LazyResult.async (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:152:31)
    at LazyResult.then (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:75:21)
    at DestroyableTransform._transform (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/index.js:28:13)
    at DestroyableTransform.Transform._read (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:10)
    at DestroyableTransform.Transform._write (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:160:12)
    at doWrite (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:326:12)
    at writeOrBuffer (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:312:5)
    at DestroyableTransform.Writable.write (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:239:11)
    at write (/Users/krisvandermast/gulptests/area512/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/Users/krisvandermast/gulptests/area512/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)

Emilieemiline

Ive got the same problem too! :( – Snakebird

@Snakebird I solved it by upgrading to node.js version 4.1.0. Please see my reply below. – Emilieemiline

Answer 1

I had opened an error on GitHub for it: https://github.com/sindresorhus/gulp-autoprefixer/issues/45.

Turned out to be that I needed to upgrade my Node.js version to 4. It's now 4.1.0 and the following code worked:

package.json

{
  "name": "a",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Kris van der Mast",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer":"^3.0.1"
  }
}

gulpfile.js

"use strict";

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('default', function () {
    return gulp.src('src/app.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist'));
});

app.css

body {
    opacity: .5;
    box-sizing: border-box;
    transform: scale(.5);
    display: flex;
}

Run gulp at this moment and get the following output:

app.css after prefixing

body {
    opacity: .5;
    box-sizing: border-box;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Emilieemiline

I got the same problem as OP, and I also upgraded to NodeJS 4.1.1. It works perfectly the way you do it, but it fails miserably (with the same error from lazyresult.js as OP) if you use gulp-sass earlier in the pipe. I even tried to gulp.src -> .pipe(sass) -> gulp.dest() then pick that up with a second gulp.src -> .pipe(autoprefixer) -> gulp.dest(). It worked the very first time then it was impossible to reproduce again. WEIRD. Could you try again with gulp-sass and verify my claim? – Pentagon