[Supported Browser] Error on Firefox 68.0.1

[Marimax01]

Hi,
I would like to know on which browser you are testing your plugin?
Because at first I was only testing on chrome and I had no problem.
But recently I wanted to test on Firefox but I have errors with the promises.
I removed all my dependencies to see which one was making this mistake.
It seems to be yours.
A polyfills story, apparently.
It is natively supported by Firefox since its version 58.
https://caniuse.com/#search=promise

Can you give me the compatibility of the browsers with your plugin please
and make a correction if you find the same thing as me?

[rickyruiz]

@Marimax01 Firefox does not display any errors for me. I'm using vue-azure-maps v0.0.24 and Firefox version 68.0.1 (64-bit) Windows 10.

As far as I know you should not have problems with any browser. I've tested it with Chrome, Firefox, Edge and Safari.

Could you provide a reproduction link or the following information:

vue-azure-maps version:

OS:

Log messages given by the failure:

Components used:

[Marimax01]

Hi, I'm sorry for the wait.
I created a simple project to show you my problem.

In this project I installed Axios and vue-azure-map in addition to the packages installed by vue cli.
I just have a component called homeView. In this one I use an API
In my main.ts I have the line to initialize your package if you launch like this on Mozilla you have a mistake. Now how the initialization phase and you have no error in al console.

Thank you for the thanks you have given to help me.

[rickyruiz]

The problem is related to core-js package and Promise.prototype.finally() polyfill, not this library. See vuejs/vue-cli#2012

In the following code block in your Home view, you use finally:

  http
    .get("https://api.chucknorris.io/jokes/random")
    .then(response => {
      this.joke = response.data.value;
    })
    .catch(error => {
      this.joke = error;
    })
    .finally(() => { // <-- This throws an error in FireFox.
      this.isLoaded = true;
    });

You could use async/await and try {} catch {} finally {} instead to fix the issue.

  async mounted() {
    const http = axios.create();

    try {
      const { data } = await http.get(
        "https://api.chucknorris.io/jokes/random"
      );

      this.joke = data.value;
    } catch (error) {
      this.joke = error;
    } finally {
      this.isLoaded = true;
    }
  }

[Marimax01]

I saw the core-js problem but it's just by commenting in the main.ts file that it changes.

With this code in my main.ts:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import VueAzureMaps from 'vue-azure-maps';
import 'vue-azure-maps/dist/vue-azure-maps.css';

Vue.use(VueAzureMaps, {
key: '<Your Azure Maps key>',
});

Vue.config.productionTip = false;

new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');

I have an error

but when my main.ts is :

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import VueAzureMaps from 'vue-azure-maps';
import 'vue-azure-maps/dist/vue-azure-maps.css';

//Vue.use(VueAzureMaps, {
// key: '<Your Azure Maps key>',
//});

Vue.config.productionTip = false;

new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');

I have no error, the promise works, just by comments initialisation of vue-azure-map, i don't touch anything else of my project.

[Marimax01]

Did you find out what the problem is?

[rickyruiz]

@Marimax01 Sorry for the late response, I have not had the time to work on this library lately. I am looking into this. The problem seems to be that the promise.prototype.finally is being overwritten.

When you import the vue-azure-maps library, the following code gets included:

"use strict";
// https://github.com/tc39/proposal-promise-finally

var $export = __webpack_require__("63b6");
var core = __webpack_require__("584a");
var global = __webpack_require__("e53d");
var speciesConstructor = __webpack_require__("f201");
var promiseResolve = __webpack_require__("cd78");

$export($export.P + $export.R, 'Promise', { 'finally': function (onFinally) {
  var C = speciesConstructor(this, core.Promise || global.Promise);
  var isFunction = typeof onFinally == 'function';
  return this.then(
    isFunction ? function (x) {
      return promiseResolve(C, onFinally()).then(function () { return x; });
    } : onFinally,
    isFunction ? function (e) {
      return promiseResolve(C, onFinally()).then(function () { throw e; });
    } : onFinally
  );
} });

I did not have useBuiltIns set to false, which is recommended for libraries here. This should fix the issue and the consuming app should now be responsible for including polyfills if needed.

[rickyruiz]

@Marimax01 Upgrade to version 0.0.27.