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

15

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.

insira a descrição da imagem aqui

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: aqui

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}`);
  },
  ...
}
J.Kirk.
fonte
3
Interessante, o Edge não deve precisar de um polyfill, pois suporta o finally()Promise desde a v18
Daniel
Por curiosidade, qual é a versão do EdgeHTML? Você pode encontrá-lo logo abaixo, onde encontra a versão Edge. Eu pergunto porque as bases do CanIUse suportam isso. Do site deles:*Version number used for Edge is based on the number of EdgeHTML rather than Edge itself. This is because EdgeHTML is the engine for Edge that is related to feature support change.
Tanner
Microsoft EdgeHTML 18.18362
J.Kirk.
2
Edge deve dizer que é uma promessa. Antes, diz que é um objeto. Portanto, o objeto retornado não é a promessa esperada.
Mouser
2
Essa pergunta pode ser melhorada fornecendo um repositório resumido, reproduzindo o problema para que outras pessoas possam ajudar. Um site como codesandbox.io pode ser usado para isso.
Jair Reina

Respostas:

1

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 ().

Midas Dev
fonte
0

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.

Jess
fonte
Infelizmente, todas as suas sugestões tentaram o mesmo resultado :(
J.Kirk.
Esquisito. Um plug-in de terceiros está excluindo Promise.finally?
Jess
desculpe pela resposta tardia. Como posso saber se um plug-in de terceiros o excluiu?
J.Kirk.
0

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,
  }),
],
Marc
fonte
Eu já tenho o browserslistrc com as versões que você listou. Acabei de testar sem o plugin - não teve efeito :(
J.Kirk.
Meu arquivo de plug-in babel tem apenas: module.exports = {presets: ['@ vue / cli-plugin-babel / preset']}
Marc
e sua promessa. finalmente funciona na borda? Alguma possibilidade de você compartilhar sua lista de pacotes e configurações para tentar deduzir qual pacote causa o problema?
J.Kirk.
Eu sempre crio meus projetos usando cli.vuejs.org/guide/creating-a-project.html#vue-create, mas o Edge 18+ suporta finalmente () que não há necessidade de um preenchimento múltiplo , apenas para o Internet Explorer?
Marc
Seu problema pode estar surgindo a partir do ApiService que você está usando, pode não estar retornando uma promessa nativa, mas sim uma emulada de sua própria criação. Tente configurar a mesma chamada usando axios diretamente como teste.
Marc