I had an interesting problem with Promise Polyfill to make promise and finally work on IE11. The page has multiple JS bundles. The existing JS bundles all had Promise polyfill from older version of core-js (babel-core@7.0.0-bridge.0).

import 'core-js/es6/promise';

Then, I added another JS bundle with the latest Promise polyfill.

The promise polyfill from the latest core-js (core-js@3.6.5) includes finally.

import 'core-js/features/promise';

The new bundle uses finally on Promise. The promise polyfill from the latest core-js (core-js@3.6.5) includes finally. It should work all fine. But, I got this error.

Unhandled promise rejection: TypeError: Object doesn’t support property or method finally.

It turned out the polyfill from the existing bundle was overriding the polyfill from the new bundle. There are 3 ways of fixing this issue. The second one is recommended.

(1) Load the new bundle after the existing one.

This will ensure to use the Promise polyfill from the latest one.

<script type="text/javascript" src="existing-bundle.js"></script>
<script type="text/javascript" src="new-bundle.js"></script>

(2) Remove polyfills from all bundle and insert in head with polyfil.io.

I think this is the best option. It is clean and removes unnecessary duplication.

<script src="https://polyfill.io/v3/polyfill.min.js?Promise%2CPromise.prototype.finally"></script>

(3) Add finally polyfill to the existing bundle with older core-js version.

import 'core-js/es6/promise';
import 'core-js/fn/promise/finally';

For further information regarding adding polyfills in TypeScript bundle, check out this post