20

As the title says, even I'd like to use babel-polyfill to allow me to use promises in my code, but I get that undefined error in IE11.

I've been trying to make this work for a while as I've seen that has been asked in different sites a few times, but none of the solutions really worked for me (or more accurately I was probably not able to adapt them to my code)

These are the files that, I think, are involved:

.babelrc

{
    "presets": [
        "es2015",
        "react"
    ]
}

package.json: I have babel-polyfill under dev-dependencies and tried to put it under dependencies (both just manually swapping and installing it through the console) and none seemed to work

My script.js doesn't have it as import (but if I tried to import @babel-polyfill, or the different combinations with forward slash when I saw that syntax in package.json, doesn't find the module)

Finally my gulpfile.babel.js has this task:

gulp.task('build:js', ['lint'], () => {
    return browserify({
            entries: path.resolve(paths().source.js, 'script.js'),
            extensions: ['.jsx'],
            debug: true
        })
        .transform(babelify)
        .plugin('minifyify', {
            map: 'script.js.map.json',
            output: path.resolve(paths().public.js, 'script.js.map.json')
        })
        .bundle()
        .pipe(source('script.js'))
        .pipe(gulp.dest(path.resolve(paths().public.js)))
        .pipe(notify({
            onLast: true,
            message: 'Building JS done'
        }));
});

What I'm doing wrong?

Thanks

mitomed
  • 2,006
  • 2
  • 29
  • 58

2 Answers2

19

You need to import Babel polyfilly before any other non-polyfill code in your JS entry point:

import 'babel-polyfill';

or if you have already switched to Babel 7:

import '@babel/polyfill';

Also note that you should switch your presets to preset-env. I'd recommend you upgrade to Babel 7 and use @babel/preset-env.

Assuming you have done the switch to Babel 7, this is what your .babelrc should look like:

{
  "presets": [
    [ "@babel/preset-env", {
      "targets": {
        "browsers": [ "last 1 version", "ie >= 11" ]
      }
    }]
  ]
}
connexo
  • 53,704
  • 14
  • 91
  • 128
  • 5
    looks like `@babel/polyfill` [has been deprecated](https://babeljs.io/docs/en/next/babel-polyfill.html) in favour of `core-js` now. – Mr5o1 Jun 14 '19 at 21:26
  • @Mr5o1 Very interesting, thannks for pointing out! The information on the page you linked is very sparse, though. Maybe you want to test things and give another answer here? – connexo Jun 15 '19 at 07:33
  • This didn't work for me. It seems so matter what I try, I get problems. Why is this stuff never easy?!?! – Pezholio Apr 20 '22 at 14:48
0

From Babel 7.4.0 you need to install and import these libraries:

import "core-js/stable";
import "regenerator-runtime/runtime";

like they said here: https://babeljs.io/docs/en/babel-polyfill

Fred K
  • 13,249
  • 14
  • 78
  • 103