Why is promise.finally in my Vue project not working in Edge?

Question

I'm having tremendous trouble getting my polyfills to work in Edge. I've tried to follow the documentation with various attempts all not working. It seems to be promise.finally specifically that isn't working. This happens in a vuex module so I tried adding vuex to transpileDependencies in vue.config but with no luck.

My babel.config.js:

module.exports = {
  presets: [['@vue/cli-plugin-babel/preset', {
    useBuiltIns: 'entry',
  }]],
};

In my main.js I have the following two imports in the very top:

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

My vue.config.js

// eslint-disable-next-line import/no-extraneous-dependencies
const webpack = require('webpack');

const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  configureWebpack: {
    // Set up all the aliases we use in our app.
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 6,
      }),
    ],
  },
  css: {
    // Enable CSS source maps.
    sourceMap: !isProd,
  },
  transpileDependencies: ['vuex'],
};

Note as mentioned above I have tried both with and without the transpileDepedencies. It says here vue/babel-preset-app that es7.promise.finally is included as a default polyfill

Versions:

• Microsoft Edge: 44.18
• Microsoft EdgeHTML 18.18362
• @vue/cli-plugin-babel": "^4.1.2"
• "core-js": "^3.6.4"
• "regenerator-runtime": "^0.13.3"

Update 13/02

So I tried to type Promise.prototype on my site in edge and it does appear it is polyfilled:

So currently I'm investigating if some part of my chain (axios/vue axios) does not return a promise. Since it is working in chrome I'm suspecting that a part of the chain is not being polyfilled correctly?

This is my entire chain:

/* VUEX MODULE ACTION */  
[a.ALL_CUSTOMERS](context) {
    context.commit(m.SET_CUSTOMER_LOADING, true);
    CustomerService.getAll()
      .then(({ data }) => {
        context.commit(m.SET_CUSTOMERS, data);
      })
      .finally(() => context.commit(m.SET_CUSTOMER_LOADING, false));
  },

/* CUSTOMER SERVICE */
import ApiService from '@/common/api.service';
const CustomerService = {
  getAll() {
    const resource = 'customers/';
    return ApiService.get(resource);
  },
...
}

/* API SERVICE */
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

const ApiService = {
  init() {
    Vue.use(VueAxios, axios);
    let baseUrl = process.env.VUE_APP_APIURL;
    Vue.axios.defaults.baseURL = baseUrl;
  },

  setHeader() {
    Vue.axios.defaults.headers.common.Authorization = `Bearer ${getToken()}`;
  },

  get(resource) {
    this.setHeader();
    return Vue.axios.get(`${resource}`);
  },
  ...
}

Answer 1

Try adding a .browserslistrc file to your projects root with the following content:

> 1%
last 2 versions

See https://github.com/browserslist/browserslist#best-practices information on last versions configuration.

---

If this does not resolve missing poly-fill, try disabling the plugin you are using that limits the number of chunks in order to ensure that this is not causing any poly-fills to be omitted.

plugins: [
  new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 6,
  }),
],

Answer 2

This is a known issue in core-js.

In theory, Edge provides a Promise polyfill for finally, but perhaps something is going on with the feature detection or your browserlist and you need to provide a polyfill :shrug:

I would delete both the Vue babel plugin and core-js from your project and then npm install them fresh.

• npm install @vue/cli-plugin-babel --save-dev

• npm install core-js --save

Also, make sure you're using core-js@3 via your config (babel.config.js) here

Lastly, there's a few Github issues talking about polyfills + Promises with regards to the other 3rd party libraries executed in your vuex store. Add all three of those libraries (axios, vue-axios, vuex) to your transpileDependencies section. If that fixes it, start removing the dependencies to see if they're needed.

Answer 3

I have ever faced that issue before. Only finally didn't work on Edge. I updated finally like below VVV and it worked.

This should handle the propagation of the thenable's species in addition to the behaviors detailed below:

Promise.prototype.finally = Promise.prototype.finally || {
  finally (fn) {
    const onFinally = value => Promise.resolve(fn()).then(() => value);
    return this.then(
      result => onFinally(result),
      reason => onFinally(Promise.reject(reason))
    );
  }
}.finally;

This implementation is based on the documented behavior of finally() and depends on then() being compliant to the specification:

A finally callback will not receive any argument, since there's no reliable means of determining if the promise was fulfilled or rejected. This use case is for precisely when you do not care about the rejection reason, or the fulfillment value, and so there's no need to provide it.

Unlike Promise.resolve(2).then(() => {}, () => {}) (which will be resolved with undefined), Promise.resolve(2).finally(() => {}) will be resolved with 2.

Similarly, unlike Promise.reject(3).then(() => {}, () => {}) (which will be fulfilled with undefined), Promise.reject(3).finally(() => {}) will be rejected with 3.

Note: A throw (or returning a rejected promise) in the finally callback will reject the new promise with the rejection reason specified when calling throw().