Compatibility with Firefox and IE 11

[thu07]

Thank you so much for your great work. However, when I integrate @mapbox-gl-draw into my angular 6 project and run in Firefox and IE 11, it exists unbelievable errors.

In Firefox, the error is "SyntaxError: missing = in const declaration"; in IE 11, the error is “SCRIPT1028: Expected identifier, string or number”. I try to find the problem, however, I can't find the error in the places where the browser points out.

Meanwhile, I have set up the compatibility configuration file in angular. Without importing @mapbox-gl-draw, Chrome, Firefox, and IE 11 works well. By the way, the Mapbox-gl version is 0.49.0 and Mapbox-gl-draw version is 1.0.9. The angular cli is the latest version as well.

Hope someone can help me to fix this problem. Appreciate it.

best

Tao

[andrewharvey]

It sounds like you need to either use the prebuilt bundle or pass it through babel?

[thu07]

@andrewharvey Thank you so much for your reply. However, I have tried the webpack and babel to compile the code, it still does not work.

The .babelrc file is like: { "presets": [ "@babel/preset-env", "@babel/preset-typescript" ] }

The webpack.config.js file is like:

const path = require('path');

module.exports = { entry: { main: './src/index.ts' }, output: { path: path.resolve(__dirname, 'dist'), filename: 'output.js' }, resolve: { extensions: ['.js', '.ts'] }, module: { rules: [ { test: /.ts$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /.html$/, use: [ { loader: "html-loader" } ] } ] }, "node": { "fs": "empty" } };

And the app.component.ts file is like:

import { Component, OnInit } from '@angular/core'; import as mapboxgl from 'mapbox-gl'; import as MapboxDraw from '@mapbox/mapbox-gl-draw';

@component({ selector: 'app-root', // template: //

//

{{title}}

//

The number: {{x}}

//

//, template:

, }) export class AppComponent implements OnInit { title: string = 'Working component!'; x: number = 123; Mapbox_Token_Key: string = "pk.eyJ1IjoiaHRlbnJpY28iLCJhIjoiY2lwbm5sZmFlMDAwMGZtbmM0NXUwaDl6aCJ9.k_s21qzyONvAqmFg5HmNuQ";

ngOnInit() {

mapboxgl.accessToken = this.Mapbox_Token_Key;

const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v9', center: [-77.04, 38.907], zoom: 11.15 });

const mbDraw = new MapboxDraw(); map.addControl(mbDraw); }

}

Could you help me to find out the reason? Appreciate it.

[kkaefer]

Fixed by switching to buble.