Bigcommerce Stencil: Javascript Error “Object does

Question

Not sure what's happening but this error is preventing the page to display.

The error message is pointing to my bundle.js file (stencil bundle with webpack, babel, etc) and specifically to the Object.assign() method in the stencil-utils package. It's line 27 of @bigcommerce/stencil-utils/src/lib/request.js

Here's the section of code producing the error.

const defaultOptions = {
    method: 'GET',
    remote: false,
    requestOptions: {
        formData: null,
        params: {},
        config: {},
        template: [],
    },
};
const options = Object.assign({}, defaultOptions, opts);
const data = options.requestOptions.formData ? options.requestOptions.formData : options.requestOptions.params;
const headers = {
    'stencil-config': options.requestOptions.config ? JSON.stringify(options.requestOptions.config) : '{}',
    'stencil-options': '{}',
};

Any ideas of what might be causing this?

Answer 1

It happens you're using the Object.assign method, which isn't supported by all browsers. Both Internet Explorer and Safari (for Windows) aren't anymore being officially updated.

Anyway, there's a polyfill of Object.assign in this page. You can apply it in the top of your code.

This is my own polyfill, which does optionally avoid creating objects/arrays references (except for objects using any additional interface like Image, etc...).

typeof Object.assign !== "function" &&

(function() {

    /**
     * Return main instance of value.
     * @param {...} value
     * @returns 
     */
    function getMainInstance(value) {
        // get instance in this format: [object Instance]
        var ic = Object.prototype.toString.call(value);
        // returns string between '[object ' and ']'
        return ic.substring(ic.indexOf(" ") + 1, ic.lastIndexOf("]")).toLowerCase();
    }


    Object.assign = function(target) {

        /* check if target isn't a object */
        if (typeof target !== "object") target = {};

        /* last target path */
        var lastPath = target;

        /* list containing target paths */
        var locations = [];

        /* consume specific array/object */
        function consume(source) {
            /* iterate each property to copy */
            for (var i in source) {
                var instance = getMainInstance(source[i]);
                if (instance === "object" || instance === "array") {
                    lastPath =
                    lastPath[i] =
                    locations[locations.length] = (instance === "array" ? [] : {})

                    consume(source[i]);

                } else {
                    lastPath[i] = source[i];
                }
            }

            var len = -- locations.length;
            lastPath = locations[--len] || target;

        }

        for (var i = 1, source; source = arguments[i]; i++) {
            if (typeof source === "object") consume(source);
        }

        return target;
    };

})();