I'm using ES6, Promises and fetch in my Polymer 2 project. Because I need to support at least IE11, I'm transpiling with Babel (via polymer-build) and using polyfills.io to polyfill fetch and Promise support. My polyfills.io import happens before any other imports and looks like this:

<script src=".js?features=default,fetch&flags=gated"></script>

When I load the page, this error appears in the IE11 console:

SCRIPT438: Object doesn't support property or method 'catch'

Looking through my code, the only time I'm using catch is in Promises. For example:

loadSchemas() {
  return APP.client
    .search("+type:Schema")
    .then(result => {
      // Do things with results.
    })
    .catch(error => {
      // Deal with errors.
    });
}

If I remove the catch, the page loads without errors, but then it obviously isn't running my error handling code.

Why isn't this working as expected? It works fine in Firefox, Chrome, and Safari. I tried a number of different promise polyfills and still got the same error, so I don't think it's a polyfill bug.

I'm using ES6, Promises and fetch in my Polymer 2 project. Because I need to support at least IE11, I'm transpiling with Babel (via polymer-build) and using polyfills.io to polyfill fetch and Promise support. My polyfills.io import happens before any other imports and looks like this:

<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,fetch&flags=gated"></script>

When I load the page, this error appears in the IE11 console:

SCRIPT438: Object doesn't support property or method 'catch'

Looking through my code, the only time I'm using catch is in Promises. For example:

loadSchemas() {
  return APP.client
    .search("+type:Schema")
    .then(result => {
      // Do things with results.
    })
    .catch(error => {
      // Deal with errors.
    });
}

If I remove the catch, the page loads without errors, but then it obviously isn't running my error handling code.

Why isn't this working as expected? It works fine in Firefox, Chrome, and Safari. I tried a number of different promise polyfills and still got the same error, so I don't think it's a polyfill bug.

• javascript
• polymer
• internet-explorer-11
• es6-promise
• polyfills

2 Answers 2

So, it looks like catch is a reserved word in IE 9+. I found this nugget of information at https://github./lahmatiy/es6-promise-polyfill:

catch is a reserved word in IE<9, meaning promise.catch(func) throws a syntax error. To work around this, use a string to access the property:

promise['catch'](function(err) { // ... });

Or use .then instead:

promise.then(undefined, function(err) { // ... });

My code works in IE11 if I modify it to avoid catch, like so:

loadSchemas() {
  return APP.client
    .search("+type:Schema")
    .then(result => {
      // Do things with results.
    }, error => {
      // Deal with errors.
    });
}

Actually, if you import /webponentsjs/webponents-lite.js polyfill (with Polymer 2.x), it will most likely rewrote the Promise polyfill. And this polyfill currently has an open issue with "catch" :

https://github./webponents/webponentsjs/issues/837

Where proposed Workaround is:

Pin the version of the WebComponents polyfill to 1.0.7 or less.

I took a look at the webponents-lite polyfill for Promise, and they replace the Promise definition if the following is false (I simplified the writing):

Object.prototype.toString.call(window.Promise.resolve()) == "[object Promise]"

However, even if you import Promise polyfill from other sources, they render to "[object Object]", hence they are replaced.

Note: the webponents-lite polyfill for Promise also currently doesn't expose a Promise.all() method, it's also probably due to above issue with Closure piler.

Proposed Workaround while this issue is not fixed:

Load your polyfill after the Webponents polyfill.

// load webponents polyfills
(function() {
    if ('registerElement' in document
        && 'import' in document.createElement('link')
        && 'content' in document.createElement('template')) {
        // browser has web ponents
    }
    else {
        // polyfill web ponents
        let e = document.createElement('script');
        e.src = '/bower_ponents/webponentsjs/webponents-lite.js';
        document.head.appendChild(e);
    }

    // Promise polyfill for IE11, as of 2017/09/07 webponents Promise polyfill is broken
    // (https://github./webponents/webponentsjs/issues/837)
    if (!window['Promise'] || !window['Promise']['reject']){
        // Remove the webponents polyfilled Promise object
        delete window.Promise;

        // Add own polyfill for Promise
        let e = document.createElement('script');
        e.src = '/lib/promisePolyfill/promise.js'; // or polyfill.io
        document.head.appendChild(e);
    }
})();