Magento 2 IE11 Javascript Error - expected identifier

chat_bubble_outline0
Magento 2 IE11 Javascript Error - expected identifier

Короткая заметка для тех, кто получает сообщения от своих клиентов, что их сайт перестал работать или оформлять заказ. Из основных симптомов это: “нажал на кнопку купить и я все время вижу лоадер – прогресс загрузки или выполнения действия”

Проблема встречается не только в Js компонентах для Magento 2 но и вообще распространена в мире JavaScript среди разработчиков, которые 99% своего времени работают с одним браузером – Google Chrome (например) и не обращают внимание на синтаксические ошибки.

Почему я акцентировал внимание на Google Chrome?

Потому, что этот браузер не так чувствителен к синтаксическим ошибкам, как то же IE – Internet Explorer

 

Пример “плохого кода” Что с ним не так?

Скажу так, что этот код работает 100% в Google Chrome но не будет работать в IE

/*global define*/
 define(
    [
    'jquery',
    'ko',
    'Magento_Checkout/js/model/checkout-data-resolver',
    ],
    function (
        $, 
        ko, 
        checkoutDataResolver,
        ) {
        "use strict";
        var shippingRates = ko.observableArray([]);
        return {
            isLoading: ko.observable(false),
            /**
             * Set shipping rates
             *
             * @param ratesData
             */
             setShippingRates: function(ratesData) {

                shippingRates(ratesData);
                shippingRates.valueHasMutated();
                checkoutDataResolver.resolveShippingRates(ratesData);

                // Select shippingrate if available 
                $(ratesData).each(function(index){
                    var button = $('.setShippingInformation');
                    var title = ratesData[index]['carrier_code'];
                    if (title == 'shippingrate') {
                        var delivery = $("#s_method_shippingrate_shippingrate");

                        if ( $(delivery).hasClass('selectedByDefault') ) {
                            console.log('selectedByDefault');
                        }else{
                            //$(delivery).trigger('click');
                            $(delivery).addClass('selectedByDefault');
                        }
                    }
                });

            },

            /**
             * Get shipping rates
             *
             * @returns {*}
             */
             getShippingRates: function() {
                return shippingRates;
            }
        };
    }
    );

 

А теперь давайте посмотрим на функцию, а точнее то, что в нее будет передано

function ($, ko, checkoutDataResolver,)

 

Да, это именно то о чем вы подумали, после запятой ожидается идентификатор/параметр – которого нет.

 

Это важно?

Да, ведь если вы не собираетесь передавать больше параметров, то зачем ставить запятую?! В Google Chrome и других браузерах не IE, массив передаваемых параметров будет отфильтрован, т.е. пустые значения не будут переданы если вы явно их не передавали.

Например у вас есть функция test(arg1, arg2) вы можете передать в функцию только первый аргумент, тогда второй будет undefined