Gulp-autoprefixer throwing ReferenceError : Promise is not defined

81

나는 내 sass를 컴파일 한 다음 autoprefixit을 사용하여 gulp를 만들려고 노력 gulp-autoprefixer하지만 오류가 발생합니다.

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

gulp.task('test', function(){
    gulp.src('_sass/main.sass')
        .pipe(sass())
        .pipe(autoprefixer()) 
        .pipe(gulp.dest('./assets/css')); 
});

나는 이것을 실행하려고하는데 Gulpfile.js사용하고 있습니다.

"gulp": "~3.9.0",
"gulp-sass": "~2.0.4",
"gulp-autoprefixer": "~3.0.1",

및 NPM 버전 1.3.10

내가 실행할 때 나는 gulp test이것을 얻는다 : 

/home/matei/Tests/test-4/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 (/home/matei/Tests/test-4/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:152:31)
    at LazyResult.then (/home/matei/Tests/test-4/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:75:21)
    at DestroyableTransform._transform (/home/matei/Tests/test-4/node_modules/gulp-autoprefixer/index.js:28:13)
    at DestroyableTransform.Transform._read (/home/matei/Tests/test-4/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:10)
    at DestroyableTransform.Transform._write (/home/matei/Tests/test-4/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:160:12)
    at doWrite (/home/matei/Tests/test-4/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:326:12)
    at writeOrBuffer (/home/matei/Tests/test-4/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:312:5)
    at DestroyableTransform.Writable.write (/home/matei/Tests/test-4/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:239:11)
    at write (/home/matei/Tests/test-4/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/home/matei/Tests/test-4/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)

나는 내가 뭘 잘못하고 있는지 정말 모른다. sass 또는 일반 CSS를 사용할 때 작동하지 않습니다. 내 파일에 뭔가가 있다고 생각합니다.

node.js  npm  gulp  autoprefixer 
— 마테이
소스
1
Autoprefixer에 의해 오류가 발생했을 때 이것이 Sass (또는 CSS)와 어떤 관련이 있는지 확실하지 않습니다.
— cimmanon
2
이것이 해결책인지 아닌지 확실하지 않지만 NPM 버전이 오래되었습니다. npm과 모든 패키지를 업데이트 해보십시오. 이전 빌드를 실행하는 동안 이와 같은 이상한 점이 발생했습니다.
— Benjamin Solum 2015 년

답변:

78

같은 문제가있었습니다. 나를 위해 노드 업데이트가 작동하지 않았지만 gulpfile의 맨 처음에 이것을 추가하면 다음과 같이 작동했습니다.

require('es6-promise').polyfill();
— 크리스시를 즈
소스
이것은 좋은 "핫픽스"입니다. 더 나은 해결책은 node.js를 업데이트하는 것입니다 (@Matei의 답변 참조)
— Mark
1
나는 같은 @MonkeyKing 문제가 해결되지 않는 노드를 갱신, 내 대답했다
— 크리스 Searles
4
무슨 패키지? 나는 얻는다cannot find module es6-promise
— Victor
3
@Victor가 npm install es6-promise터미널에서 실행 해보세요
— Michael
66

다음을 사용하여 node.js를 최신 버전으로 업데이트했습니다.

# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs

여기에 표시된대로 내 Ubuntu 컴퓨터의 경우 .

그 후 다음을 사용하여 NPM을 업데이트했습니다.

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

여기에 표시된대로 .

이제 gulp-autoprefixer시작은 작동하지만에서 오류가 발생했습니다 gulp-sass. 이 지침을 사용하여 업데이트했습니다.

  1. node_modules 폴더 삭제
  2. package.json 파일에서 gulp-sass 제거
  3. package.json 파일에서 node-sass를 제거하십시오 (해당 파일이있는 경우).
  4. npm install gulp-sass --save-dev 실행
  5. 필요에 따라 Gulp 작업 업데이트

여기 에서 발견 내가 가지고 부탁해 "gulp-sass": "^2.0.4"이 내 모든 문제를 해결했습니다.

조언과 도움을 주셔서 감사합니다.

— 마테이
소스
11
노드 업그레이드 후 node-sass작업 할 수 있습니다 npm rebuild node-sass.
— 휴 Grigg은葛修远
그냥 잘 했어요. 감사. 또한 콘솔 메시지는 태스크를 실행하는 동안 오류가 발생하면이 명령을 실행하도록 요청합니다
— Pushpak Patel
1
이것은 실제로 NodeJS 버전 문제입니다. github.com/sindresorhus/gulp-autoprefixer/issues/45
— tricasse
좋은 지시. OS에 구애받지 않는 지침은 nodesource.com/services/upgrade-self-service
— toad
나는 그 단계가 필요하지 않았고 노드 엉덩이 문제를 해결 sudo npm cache clean -f sudo npm install -g n sudo n stable하는 데 사용 npm rebuild node-sass되었습니다. :)
— Edu Ruiz
29

package.json이있는 프로젝트 위치에 es6-promise를 설치합니다.

npm install es6-promise

그런 다음 gulpfile.js의 첫 번째 줄을 다음 코드로 만듭니다. 

var Promise = require('es6-promise').Promise;
— 하리 길 랄라
소스
2

이것은 질문에 직접 답하지는 않지만 ionic 2 튜토리얼을 실행하려고 할 때이 오류가 발생하는 사람들에게 유용 할 수 있습니다.

다른 답변에서 지적했듯이 문제 es6-promise는 누락되었습니다.

ionic 2 튜토리얼 ( https://github.com/driftyco/ionic2-starter-tutorial ) 을 시작하려고 할 때 동일한 오류가 발생했습니다 . (내 ionic 2 버전은 2.0.0-beta.25이고 최신 튜토리얼 커밋은 ed9ef2fcce887e4d1c08c375c849b06b8394bad7입니다. )

다음은 앱을 실행하려고 할 때 얻은 스택 추적입니다 ionic serve.

Running 'serve:before' gulp task before serve
[18:37:00] Starting 'clean'...
[18:37:01] Finished 'clean' after 1.02 s
[18:37:01] Starting 'watch'...
[18:37:01] Starting 'sass'...
[18:37:01] Starting 'html'...
[18:37:01] Starting 'fonts'...
[18:37:01] Starting 'scripts'...
[18:37:01] Finished 'scripts' after 62 ms
[18:37:01] Finished 'html' after 72 ms
[18:37:01] Finished 'fonts' after 77 ms
Caught exception:
 ReferenceError: Promise is not defined
    at LazyResult.async (/home/stitakis/dev/playground/ionic2/myTutorial/node_modules/ionic-gulp-sass-build/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:157:31)
    at LazyResult.then (/home/stitakis/dev/playground/ionic2/myTutorial/node_modules/ionic-gulp-sass-build/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:79:21)
    at DestroyableTransform._transform (/home/stitakis/dev/playground/ionic2/myTutorial/node_modules/ionic-gulp-sass-build/node_modules/gulp-autoprefixer/index.js:24:6)
    at DestroyableTransform.Transform._read (/home/stitakis/dev/playground/ionic2/myTutorial/node_modules/ionic-gulp-sass-build/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:159:10)
    at DestroyableTransform.Transform._write (/home/stitakis/dev/playground/ionic2/myTutorial/node_modules/ionic-gulp-sass-build/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:147:83)
    at doWrite (/home/stitakis/dev/playground/ionic2/myTutorial/node_modules/ionic-gulp-sass-build/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:313:64)
    at writeOrBuffer (/home/stitakis/dev/playground/ionic2/myTutorial/node_modules/ionic-gulp-sass-build/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:302:5)
    at DestroyableTransform.Writable.write (/home/stitakis/dev/playground/ionic2/myTutorial/node_modules/ionic-gulp-sass-build/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:241:11)
    at DestroyableTransform.ondata (/home/stitakis/dev/playground/ionic2/myTutorial/node_modules/ionic-gulp-sass-build/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:531:20)
    at DestroyableTransform.EventEmitter.emit (events.js:95:17)

다시 말하지만 다른 답변에서 지적했듯이 이것을 해결하는 방법은 다음과 같습니다.

  1. gulpfile.js를 편집하고 6 행에 추가하십시오. require('es6-promise').polyfill();

  2. 다음을 사용하여 누락 된 종속성을 설치하십시오. npm install es6-promise --save

이 변경 후 문제가 해결되어 로컬 서버를 시작할 수있었습니다.

— stitakis
소스
이것은 나를 위해 문제를 해결했으며, 내가해야 할 일은 --save와 함께 npm install es6-promise를 사용하고 위의 awnser에서 .Promise ()를 사용하여 .pollyfill과 함께 필요로 사용하는 것뿐이었습니다.
— killstreet
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.