Por que a promessa. Finalmente no meu projeto Vue não está funcionando no Edge?

Estou com um tremendo problema para que meus polyfills funcionem no Edge. Eu tentei seguir a documentação com várias tentativas, todas não funcionando. Parece ser promessa. Finalmente, especificamente, isso não está funcionando. Isso acontece em um módulo vuex, então tentei adicionar o vuex ao transpileDependencies no vue.config, mas sem sorte.

Meu babel.config.js:

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

No meu main.js, tenho as duas importações a seguir no topo:

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

Meu 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'],
};

Observe como mencionado acima, eu tentei com e sem o transpileDepedencies. Ele diz aqui vue / babel-preset-app que es7.promise.finallyestá incluído como um polyfill padrão

Versões:

• 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"

Atualização 13/02

Então, eu tentei digitar Promise.prototype no meu site em edge e parece que ele é polyfilled:

Atualmente, estou investigando se alguma parte da minha cadeia (axios / vue axios) não retorna uma promessa. Como ele está funcionando no chrome, estou suspeitando que uma parte da cadeia não está sendo polifilada corretamente?

Esta é toda a minha cadeia:

/* 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}`);
  },
  ...
}

Eu já enfrentei esse problema antes. Só que finalmente não funcionou no Edge. Atualizei finalmente como abaixo VVV e funcionou.

Isso deve lidar com a propagação das espécies da tabela, além dos comportamentos detalhados abaixo:

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;

Esta implementação é baseada no comportamento documentado de finally () e depende de then () ser compatível com a especificação:

Um retorno de chamada finalmente não receberá nenhum argumento, pois não há meios confiáveis ​​para determinar se a promessa foi cumprida ou rejeitada. Esse caso de uso é exatamente quando você não se importa com o motivo da rejeição ou o valor da satisfação e, portanto, não há necessidade de fornecê-lo.

Ao contrário de Promise.resolve(2).then(() => {}, () => {})(que será resolvido com indefinido), Promise.resolve(2).finally(() => {})será resolvido com 2.

Da mesma forma, diferente de Promise.reject(3).then(() => {}, () => {})(que será cumprido com indefinido), Promise.reject(3).finally(() => {}) será rejeitado com 3.

Nota : Um lançamento (ou retornando uma promessa rejeitada) no retorno de chamada finalmente rejeitará a nova promessa com o motivo da rejeição especificado ao chamar throw ().

Esse é um problema conhecido no core-js .

Em teoria, o Edge fornece um polyfill Promise para finalmente, mas talvez algo esteja acontecendo com a detecção de recurso ou sua lista de navegadores e você precisa fornecer um polyfill: shrug:

Eu excluiria o plug-in Vue babel e o core-js do seu projeto e depois o npm os instalaria novamente.

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

• npm install core-js --save

Além disso, verifique se você está usando o core-js @ 3 através da sua configuração (babel.config.js) aqui

Por fim, existem alguns problemas do Github falando sobre polyfills + Promises com relação às outras bibliotecas de terceiros executadas em sua loja vuex. Adicione todas as três bibliotecas (axios, vue-axios, vuex) à sua transpileDependenciesseção. Se isso corrigir, comece a remover as dependências para ver se são necessárias.

Tente adicionar um .browserslistrcarquivo à raiz do seu projeto com o seguinte conteúdo:

> 1%
last 2 versions

Consulte https://github.com/browserslist/browserslist#best-practices informações sobre last versionsconfiguração.

Se isso não resolver o poly-fill ausente, tente desativar o plug-in que você está usando para limitar o número de blocos, a fim de garantir que isso não cause omitir nenhum poly-fill.

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