Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Promise is undefined in IE11 using babel-polyfill

Tags:

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

like image 635
mitomed Avatar asked Sep 23 '18 20:09

mitomed


People also ask

What is promise polyfill?

Promise Usage. The promise is a constructor which accepts an executor function as a parameter. The executor function has a resolve callback, and a reject callback as its parameter. Once the Promise constructor is called, an async operation is initiated, say, an HTTP API call.

Is Babel a polyfill?

Babel includes a polyfill that includes a custom regenerator runtime and core-js. This will emulate a full ES2015+ environment (no < Stage 4 proposals) and is intended to be used in an application rather than a library/tool. (this polyfill is automatically loaded when using babel-node ).

Why do we need Babel polyfill?

Babel Polyfill adds support to the web browsers for features, which are not available. Babel compiles the code from recent ecma version to the one, which we want. It changes the syntax as per the preset, but cannot do anything for the objects or methods used.


1 Answers

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" ]
      }
    }]
  ]
}
like image 110
connexo Avatar answered Oct 06 '22 23:10

connexo