SyntaxError: Unexpected token '='. Expected a ')' or a ',' after a parameter declaration.' in safari

Question

I've muddled some JS code together which appears to work in firefox (no errors and functions correctly) but throws up 'SyntaxError: Unexpected token '='. Expected a ')' or a ',' after a parameter declaration.' in safari. I have the following object in php

$items = Array ( [0] => stdClass Object ( [id] => 1 [class] => class_a [make] => Kia [model] => Picanto [features] => 3,4,5,6,7,8 [colour] => white [engine] => 1000cc [ordering] => 1 [published] => 1 [image] => images/vehicles/picanto.jpg ) [1] => stdClass Object ( [id] => 2 [class] => motorbike [make] => Honda [model] => Transalp [features] => [colour] => blue [engine] => 650cc [ordering] => 6 [published] => 1 [image] => ) [2] => stdClass Object ( [id] => 3 [class] => moped [make] => Sym [model] => SR [features] => [colour] => white [engine] => 150cc [ordering] => 5 [published] => 1 [image] => ) [3] => stdClass Object ( [id] => 4 [class] => class_b [make] => Suzuki [model] => Splash [features] => 12 [colour] => Red [engine] => 1300cc [ordering] => 3 [published] => 1 [image] => images/vehicles/suzuki_splash.jpg ) [4] => stdClass Object ( [id] => 5 [class] => class_f [make] => Peugot [model] => 307 Cabrio [features] => 8,9,10,11 [colour] => Black [engine] => 1600cc [ordering] => 4 [published] => 1 [image] => images/vehicles/peugeot307.jpg ) [5] => stdClass Object ( [id] => 6 [class] => class_a [make] => Hyundai [model] => Atos [features] => [colour] => white [engine] => 1100cc [ordering] => 2 [published] => 1 [image] => images/vehicles/atos.jpg ) )

And the following javascript

<script type="text/javascript">
jQuery(document).ready(function($){
    var items = <?PHP echo json_encode($items)?>;
    console.log(items);
    for (var i = 0, len = items.length; i < len; i++) {
        lookup[items[i].id] = items[i];     //access the new lookup object using lookup[id].variable i.e lookup[1].image
    }
    var vId ="";
    function updateImg(img, display=true){
        if (display == true){
            $("#vehicle-image").show(500);
        }else{
            $("#vehicle-image").hide(500);
        }

        $("#vehicle-image").attr("src", '/'+ img);

    }
    $('#jform_vehicle').on('change', function() {
        var vId = parseInt(($("#jform_vehicle").chosen().val()));
        console.log (vId);
        if (isNaN(vId) !==true){
            var img = lookup[vId].image;
            console.log ('img=' + img);
            updateImg(img);
        }else{
            console.log('not a number');
            var img = "";
            updateImg(img, false)
        }
    });
});
</script>

in the browser the json_encode line is as follows

var items = [{"id":"1","class":"class_a","make":"Kia","model":"Picanto","features":"3,4,5,6,7,8","colour":"white","engine":"1000cc","ordering":"1","published":"1","image":"images\/vehicles\/picanto.jpg"},{"id":"2","class":"motorbike","make":"Honda","model":"Transalp","features":"","colour":"blue","engine":"650cc","ordering":"6","published":"1","image":""},{"id":"3","class":"moped","make":"Sym","model":"SR","features":"","colour":"white","engine":"150cc","ordering":"5","published":"1","image":""},{"id":"4","class":"class_b","make":"Suzuki","model":"Splash","features":"12","colour":"Red","engine":"1300cc","ordering":"3","published":"1","image":"images\/vehicles\/suzuki_splash.jpg"},{"id":"5","class":"class_f","make":"Peugot","model":"307 Cabrio","features":"8,9,10,11","colour":"Black","engine":"1600cc","ordering":"4","published":"1","image":"images\/vehicles\/peugeot307.jpg"},{"id":"6","class":"class_a","make":"Hyundai","model":"Atos","features":"","colour":"white","engine":"1100cc","ordering":"2","published":"1","image":"images\/vehicles\/atos.jpg"}];

Which looks right so I don't know what is causing the error. Any ideas? Cheers.

Safari points to an error here in the code safari error

Answer 1

I had this issue for the past two days and finally found a solution for my case. First, some back story to my particular issue:

Safari was throwing this error with no line number or stack trace, and it's a fatal error so it was killing the rest of the JS running on my page. The code was running fine in Chrome and Firefox, and after a long time attempting to debug by cutting and pasting certain parts of my code, I found the area which the issue was occurring in.

This was only half of the solution, but it was occurring when I was importing a ES6 class. It wasn't the import causing the issue, but the contents of the class were throwing an error at some point.

There were 4 possible classes this narrowed the search down to, as this particular class had 3 imports as well as it's own class body. I decided to, while still using Safari, to go to JSFiddle and paste the contents of each class into the fiddle and see which files compile, however it turns out JSFiddle also has code inspection capabilities and it picked up on my issue straight away.

What it came down to was I was utilising a proposed feature in ES6 which was not yet officially in the language, and only implemented by a select few browsers. This feature is class fields (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_fields).

Essentially, I was writing something similar to this:

class BrokenClass {

    constructor() { this.isShutdown = false; }

    shutdownGracefully() { ... }

    endProgram(shouldKill) {
        if (shouldKill) {
            this.isShutdown = true;
            return;
        }

        shutdownGracefully();
    }

    stop = () => this.endProgram(false); // An alias for ending gracefully
    kill = () => this.endProgram(true); // An alias for killing the program

}

I was writing the stop and kill methods of this class using the class fields syntax, as they were intended to be aliases and I believed it looked cleaner as it excluded writing braces for such a small amount of code. My main browser is Google Chrome, and as Chrome had implemented this proposal it worked perfectly through months of testing, until one company decided to use the system on a Mac OS using Safari.

As safari had not implemented this proposal, it caused the whole issue I described earlier about the fatal error with no context as to why it was occurring.

So, the solution to my problem, which will hopefully help someone else in this world, is to avoid using the Class Fields syntax unless you are using a tool such as Babel.

Answer 2

If you have function like this Change these from

 function abc(a=2){
 }

To like this

 function abc(a){
  if(a === undefined){
    a = 2;
  }
 }

Safari not allow the assignment like this in function, in above first one.

Answer 3

For anyone else that finds themselves here. I can confirm that in Safari version Version 12.1 (14607.1.40.1.4) you'll get the same error for using static variables in a class. For e.g

class MyClass {
  static aVariable = 'things';
}

P.S: Static getters seem fine

class MyClass {
  static get aVariable() { return 'things' };
}