web-dev-qa-db-fra.com

Pourquoi promise.finally dans mon projet Vue ne fonctionne pas dans Edge?)

J'ai d'énormes difficultés à faire fonctionner mes polyfills dans Edge. J'ai essayé de suivre la documentation avec diverses tentatives qui ne fonctionnent pas. Cela semble être une promesse. Enfin, spécifiquement, cela ne fonctionne pas. Cela se produit dans un module vuex donc j'ai essayé d'ajouter vuex à transpileDependencies dans vue.config mais sans chance.

enter image description here

Mon babel.config.js:

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

Dans mon main.js, j'ai les deux importations suivantes tout en haut:

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

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

Notez que comme mentionné ci-dessus, j'ai essayé à la fois avec et sans transpileDepedencies. Il dit ici vue/babel-preset-app que es7.promise.finally est inclus comme polyfill par défaut

Versions:

  • Microsoft Edge: 44,18
  • Microsoft EdgeHTML 18.18362
  • @ vue/cli-plugin-babel ":" ^ 4.1.2 "
  • "core-js": "^ 3.6.4"
  • "régénérateur-runtime": "^ 0.13.3"

Mise à jour 13/02

J'ai donc essayé de taper Promise.prototype sur mon site dans Edge et il semble qu'il soit polyfilled: here

Donc actuellement, j'étudie si une partie de ma chaîne (axios/vue axios) ne renvoie pas de promesse. Puisqu'il fonctionne dans chrome je soupçonne qu'une partie de la chaîne n'est pas polyfilled correctement?)

C'est toute ma chaîne:

/* 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}`);
  },
  ...
}
javascriptvue.jsvuejs2babelpolyfills
15
J.Kirk.

C'est un problème connu dans core-js .

En théorie, Edge fournit un polyfill Promise pour enfin, mais peut-être que quelque chose se passe avec la détection des fonctionnalités ou votre liste de navigateur et vous devez fournir un polyfill: haussement d'épaules:

Je supprimerais à la fois le plugin Vue babel et core-js de votre projet, puis npm les installerais à nouveau.

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

  • npm install core-js --save

Assurez-vous également que vous utilisez core-js @ 3 via votre config (babel.config.js) ici

Enfin, il y a quelques problèmes avec Github concernant les polyfills + promesses en ce qui concerne les autres bibliothèques tierces exécutées dans votre magasin vuex. Ajoutez ces trois bibliothèques (axios, vue-axios, vuex) à votre section transpileDependencies. Si cela résout le problème, commencez à supprimer les dépendances pour voir si elles sont nécessaires.

0
Jess

Essayez d'ajouter un .browserslistrc à la racine de vos projets avec le contenu suivant:

> 1%
last 2 versions

Voir https://github.com/browserslist/browserslist#best-practices informations sur last versions configuration.

Si cela ne résout pas le poly-fill manquant, essayez de désactiver le plugin que vous utilisez qui limite le nombre de morceaux afin de vous assurer que cela n'entraîne pas l'omission de poly-fill.

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