Edge, IE issue SCRIPT1028: Expected identifier, string or number.

[audetcameron]

we are using babel preset env to compile, however the vue-mapbox issue of the spread operator is causing issues with edge and ie 11.

this file: /node_modules/vue-mapbox/src/lib/withEvents.js

export default {
  methods: {
    /**
     * Emit Vue event with additional data
     *
     * @param {string} name EventName
     * @param {Object} [data={}] Additional data
     */
    $_emitEvent(name, data = {}) {
      this.$emit(name, {
        map: this.map,
        component: this,
        ...data
      });
    },

    /**
     * Emit Vue event with Mapbox event as additional data
     *
     * @param {Object} event
     */
    $_emitMapEvent(event, data = {}) {
      this.$_emitEvent(event.type, { mapboxEvent: event, ...data });
    }
  }
};

compiled reference {map:this.map,component:this,...e} is where the first issue is.

[audetcameron]

this issue was solved with

        {
          test: /\.m?js$/,
          exclude: /node_modules\/(?!(vue-mapbox)\/).*/,   //this fixed it,  
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  ['@babel/preset-env', {
                    debug: true,
                    useBuiltIns: 'usage'
                  }],
                ],
                plugins: [
                   '@babel/plugin-proposal-object-rest-spread',
                   '@babel/plugin-transform-spread'
                ]
              }
            }
          ]
        },

[Hawxy]

Assuming you have @vue/cli-plugin-babel installed and your settings defined in babel.config.js, all you need to do is add transpileDependencies: ['vue-mapbox'] to your vue.config.js. You should practically never need to do manual configuration of webpack loaders in modern versions of Vue.

[danielholmes]

I fixed it (in my webpack build) using:

resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.vue', '.ts'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        'public': path.resolve(__dirname, '../public'),
        'vue-mapbox': path.resolve(__dirname, '../node_modules/vue-mapbox/dist/vue-mapbox.umd.min.js')
    }
}

[larenelg]

Assuming you have @vue/cli-plugin-babel installed and your settings defined in babel.config.js, all you need to do is add transpileDependencies: ['vue-mapbox'] to your vue.config.js. You should practically never need to do manual configuration of webpack loaders in modern versions of Vue.

This worked for me! Now works on safari on iOS 9.3.6 :D

[jssouders]

I am having the exact same issue in my NUXTJS (v2.9.2) web application. I was able to resolve the spread operator issue described above by adding the vue-mapbox library to the build > transpile option in the nuxt.config.js file.

  build: {
    transpile: [
      ({ isLegacy }) => isLegacy && "vue-mapbox"
    ]
  }

This builds with the following warning...

WARN  in ./node_modules/vue-mapbox/src/components/map/mixins/withAsyncActions.js                                                                        

"export 'default' (imported as 'promisify') was not found in 'map-promisified' 

After adding the transpile option it allowed the app to load in IE11 and Edge, but now functionality is failing in all browsers due to a new error with es6.promis.js library. I would guess there is now a javascript version incompatibility between vue-mapbox and this file.

Uncaught (in promise) TypeError: Object(...) is not a function
    at VueComponent.$_registerAsyncActions (vendors.app.js:79061)
    at vendors.app.js:25088

error TypeError: Cannot read property 'querySourceFeatures' of null
    at VueComponent.createMapMarkers (:8080/_nuxt/pages/index.js:1418)
    at VueComponent.onIdle (:8080/_nuxt/pages/index.js:1365)
    at invokeWithErrorHandling (commons.app.js:14784)
    at VueComponent.invoker (commons.app.js:15109)
    at invokeWithErrorHandling (commons.app.js:14784)
    at VueComponent.Vue.$emit (commons.app.js:16807)
    at VueComponent.$_emitEvent (vendors.app.js:79571)
    at VueComponent.$_emitMapEvent (vendors.app.js:79584)
    at r.St.fire (vendors.app.js:53018)
    at r._render (vendors.app.js:53022)

[jssouders]

We were able to solve this issue by making the following additions/changes in our solution.

1. Changed our vue-mapbox import to directly reference the umd js file in the dist folder of vue-mapbox package

import { MglMap, MglGeolocateControl, MglNavigationControl } from "vue-mapbox/dist/vue-mapbox.umd.js";

2. Added a script reference to polyfill.io (specifying the features needed) to the Nuxt.config.js

const ployfillFeatures = [
  "fetch",
  "Object.entries",
  "Element.prototype.classList",
  "IntersectionObserver"
].join("%2C");

module.exports = {
  mode: "universal",    
    script: [
      { src: `https://polyfill.io/v3/polyfill.min.js?features=${ployfillFeatures}`, body: true }