Skip to content

Gulp & Babel polyfill Promises for IE11 issue

I have an old project written in Angular.js. I need to polyfill promises for IE11 but it’s not working.

In gulpfile.js I have requires for Babel stuff

var corejs = require('core-js/stable'),
    regenerator = require('regenerator-runtime/runtime'),
    presetEnv = require('@babel/preset-env'),
    concat = require('gulp-concat'),
    gulp = require('gulp'),
    babel = require('gulp-babel'),
    babelRegister = require ('@babel/register'),

And here I am using the pipe

var envJS = function () {
    var condition = (config[environment].compression);
    return gulp.src(paths.appJS)
        .pipe(babel(
            {
                "presets": [
                    [ "@babel/preset-env", {
                      "targets": {
                          "browsers": ["ie >= 11"]
                      },
                      "useBuiltIns": "entry",
                      "corejs": 3 
                    }]
                  ]
            }
        ))
        .pipe(ngAnnotate())
        //.pipe(gulpif(!condition, jshint()))
        //.pipe(gulpif(!condition, jshint.reporter('default')))
        .pipe(addStream.obj(prepareTemplates()))
        .pipe(configServer())
        .pipe(gulpif(condition, uglify({mangle: true})))
        .pipe(concat(randomNames.js))
        .pipe(gulp.dest(folderDist))
        .pipe(connect.reload());
};

The code builds and works on chrome but still have the issue on IE11 which means it’s not polyfilling the Promise object.

I am stuck and don’t have any ideas what else should I do.

Answer

I have had good success with promise-polyfill. As long as that loads before your promise-specific code, it should just work. I know that’s not babel-specific, but it solved my IE-compatibility woes back when I still had to support IE.