Ecommerce Shopify WordPress Discussion

Safari – TypeError: Illegal constructor

I'm working on a Shopify Theme called Focal. The @ungap Polyfill for Custom Elements is included and everything in the Theme works fine, but when I include the Aplazo Widget, it stops being displayed in Safari. Safari problem If I comment the Polyfill is shown, but the native Custom Elements no longer work. I shared the Polyfill code: // node_modules/@ungap/custom-elements/index.js (function() { "use strict"; var attributesObserver = function(whenDefined2, MutationObserver2) { var attributeChanged = function attributeChanged2(records) { for (var i = 0, length = records.length; i < length; i++) dispatch(records[i]); }; var dispatch = function dispatch2(_ref2) { var target = _ref2.target, attributeName = _ref2.attributeName, oldValue = _ref2.oldValue; target.attributeChangedCallback(attributeName, oldValue, target.getAttribute(attributeName)); }; return function(target, is2) { var attributeFilter = target.constructor.observedAttributes; if (attributeFilter) { whenDefined2(is2).then(function() { new MutationObserver2(attributeChanged).observe(target, { attributes: true, attributeOldValue: true, attributeFilter }); for (var i = 0, length = attributeFilter.length; i < length; i++) { if (target.hasAttribute(attributeFilter[i])) dispatch({ target, attributeName: attributeFilter[i], oldValue: null }); } }); } return target; }; }; function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function() { }; return { s: F, n: function() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function(e) { throw e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function() { it = it.call(o); }, n: function() { var step = it.next(); normalCompletion = step.done; return step; }, e: function(e) { didErr = true; err = e; }, f: function() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } var TRUE = true, FALSE = false, QSA$1 = "querySelectorAll"; var notify = function notify2(callback) { var root = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : document; var MO = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : MutationObserver; var query2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : ["*"]; var loop = function loop2(nodes, selectors, added, removed, connected, pass) { var _iterator = _createForOfIteratorHelper(nodes), _step; try { for (_iterator.s(); !(_step = _iterator.n()).done; ) { var node = _step.value; if (pass || QSA$1 in node) { if (connected) { if (!added.has(node)) { added.add(node); removed["delete"](node); callback(node, connected); } } else if (!removed.has(node)) { removed.add(node); added["delete"](node); callback(node, connected); } if (!pass) loop2(node[QSA$1](selectors), selectors, added, removed, connected, TRUE); } } } catch (err) { _iterator.e(err); } finally { _iterator.f(); } }; var mo = new MO(function(records) { if (query2.length) { var selectors = query2.join(","); var added = new Set(), removed = new Set(); var _iterator2 = _createForOfIteratorHelper(records), _step2; try { for (_iterator2.s(); !(_step2 = _iterator2.n()).done; ) { var _step2$value = _step2.value, addedNodes = _step2$value.addedNodes, removedNodes = _step2$value.removedNodes; loop(removedNodes, selectors, added, removed, FALSE, FALSE); loop(addedNodes, selectors, added, removed, TRUE, FALSE); } } catch (err) { _iterator2.e(err); } finally { _iterator2.f(); } } }); var observe = mo.observe; (mo.observe = function(node) { return observe.call(mo, node, { subtree: TRUE, childList: TRUE }); })(root); return mo; }; var QSA = "querySelectorAll"; var _self$1 = self, document$2 = _self$1.document, Element$1 = _self$1.Element, MutationObserver$2 = _self$1.MutationObserver, Set$2 = _self$1.Set, WeakMap$1 = _self$1.WeakMap; var elements = function elements2(element) { return QSA in element; }; var filter = [].filter; var qsaObserver = function(options) { var live = new WeakMap$1(); var drop = function drop2(elements2) { for (var i = 0, length = elements2.length; i < length; i++) live["delete"](elements2[i]); }; var flush = function flush2() { var records = observer.takeRecords(); for (var i = 0, length = records.length; i < length; i++) { parse2(filter.call(records[i].removedNodes, elements), false); parse2(filter.call(records[i].addedNodes, elements), true); } }; var matches = function matches2(element) { return element.matches || element.webkitMatchesSelector || element.msMatchesSelector; }; var notifier = function notifier2(element, connected) { var selectors; if (connected) { for (var q, m = matches(element), i = 0, length = query2.length; i < length; i++) { if (m.call(element, q = query2[i])) { if (!live.has(element)) live.set(element, new Set$2()); selectors = live.get(element); if (!selectors.has(q)) { selectors.add(q); options.handle(element, connected, q); } } } } else if (live.has(element)) { selectors = live.get(element); live["delete"](element); selectors.forEach(function(q2) { options.handle(element, connected, q2); }); } }; var parse2 = function parse3(elements2) { var connected = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true; for (var i = 0, length = elements2.length; i < length; i++) notifier(elements2[i], connected); }; var query2 = options.query; var root = options.root || document$2; var observer = notify(notifier, root, MutationObserver$2, query2); var attachShadow2 = Element$1.prototype.attachShadow; if (attachShadow2) Element$1.prototype.attachShadow = function(init2) { var shadowRoot = attachShadow2.call(this, init2); observer.observe(shadowRoot); return shadowRoot; }; if (query2.length) parse2(root[QSA](query2)); return { drop, flush, observer, parse: parse2 }; }; var _self = self, document$1 = _self.document, Map = _self.Map, MutationObserver$1 = _self.MutationObserver, Object$1 = _self.Object, Set$1 = _self.Set, WeakMap = _self.WeakMap, Element = _self.Element, HTMLElement = _self.HTMLElement, Node = _self.Node, Error2 = _self.Error, TypeError$1 = _self.TypeError, Reflect = _self.Reflect; var defineProperty = Object$1.defineProperty, keys = Object$1.keys, getOwnPropertyNames = Object$1.getOwnPropertyNames, setPrototypeOf = Object$1.setPrototypeOf; var legacy = !self.customElements; var expando = function expando2(element) { var key = keys(element); var value = []; var ignore = new Set$1(); var length = key.length; for (var i = 0; i < length; i++) { value[i] = element[key[i]]; try { delete element[key[i]]; } catch (SafariTP) { ignore.add(i); } } return function() { for (var _i = 0; _i < length; _i++) ignore.has(_i) || (element[key[_i]] = value[_i]); }; }; if (legacy) { var HTMLBuiltIn = function HTMLBuiltIn2() { var constructor = this.constructor; if (!classes.has(constructor)) throw new TypeError$1("Illegal constructor"); var is2 = classes.get(constructor); if (override) return augment(override, is2); var element = createElement.call(document$1, is2); return augment(setPrototypeOf(element, constructor.prototype), is2); }; var createElement = document$1.createElement; var classes = new Map(); var defined = new Map(); var prototypes = new Map(); var registry = new Map(); var query = []; var handle = function handle2(element, connected, selector) { var proto = prototypes.get(selector); if (connected && !proto.isPrototypeOf(element)) { var redefine = expando(element); override = setPrototypeOf(element, proto); try { new proto.constructor(); } finally { override = null; redefine(); } } var method = "".concat(connected ? "" : "dis", "connectedCallback"); if (method in proto) element[method](); }; var _qsaObserver = qsaObserver({ query, handle }), parse = _qsaObserver.parse; var override = null; var whenDefined = function whenDefined2(name) { if (!defined.has(name)) { var _, $ = new Promise(function($2) { _ = $2; }); defined.set(name, { $, _ }); } return defined.get(name).$; }; var augment = attributesObserver(whenDefined, MutationObserver$1); self.customElements = { define: function define2(is2, Class) { if (registry.has(is2)) throw new Error2('the name "'.concat(is2, '" has already been used with this registry')); classes.set(Class, is2); prototypes.set(is2, Class.prototype); registry.set(is2, Class); query.push(is2); whenDefined(is2).then(function() { parse(document$1.querySelectorAll(is2)); }); defined.get(is2)._(Class); }, get: function get2(is2) { return registry.get(is2); }, whenDefined }; defineProperty(HTMLBuiltIn.prototype = HTMLElement.prototype, "constructor", { value: HTMLBuiltIn }); self.HTMLElement = HTMLBuiltIn; document$1.createElement = function(name, options) { var is2 = options && options.is; var Class = is2 ? registry.get(is2) : registry.get(name); return Class ? new Class() : createElement.call(document$1, name); }; if (!("isConnected" in Node.prototype)) defineProperty(Node.prototype, "isConnected", { configurable: true, get: function get2() { return !(this.ownerDocument.compareDocumentPosition(this) & this.DOCUMENT_POSITION_DISCONNECTED); } }); } else { legacy = !self.customElements.get("extends-br"); if (legacy) { try { var BR = function BR2() { return self.Reflect.construct(HTMLBRElement, [], BR2); }; BR.prototype = HTMLLIElement.prototype; var is = "extends-br"; self.customElements.define("extends-br", BR, { "extends": "br" }); legacy = document$1.createElement("br", { is }).outerHTML.indexOf(is) < 0; var _self$customElements = self.customElements, get = _self$customElements.get, _whenDefined = _self$customElements.whenDefined; self.customElements.whenDefined = function(is2) { var _this = this; return _whenDefined.call(this, is2).then(function(Class) { return Class || get.call(_this, is2); }); }; } catch (o_O) { } } } if (legacy) { var _parseShadow = function _parseShadow2(element) { var root = shadowRoots.get(element); _parse(root.querySelectorAll(this), element.isConnected); }; var customElements = self.customElements; var _createElement = document$1.createElement; var define = customElements.define, _get = customElements.get, upgrade = customElements.upgrade; var _ref = Reflect || { construct: function construct2(HTMLElement2) { return HTMLElement2.call(this); } }, construct = _ref.construct; var shadowRoots = new WeakMap(); var shadows = new Set$1(); var _classes = new Map(); var _defined = new Map(); var _prototypes = new Map(); var _registry = new Map(); var shadowed = []; var _query = []; var getCE = function getCE2(is2) { return _registry.get(is2) || _get.call(customElements, is2); }; var _handle = function _handle2(element, connected, selector) { var proto = _prototypes.get(selector); if (connected && !proto.isPrototypeOf(element)) { var redefine = expando(element); _override = setPrototypeOf(element, proto); try { new proto.constructor(); } finally { _override = null; redefine(); } } var method = "".concat(connected ? "" : "dis", "connectedCallback"); if (method in proto) element[method](); }; var _qsaObserver2 = qsaObserver({ query: _query, handle: _handle }), _parse = _qsaObserver2.parse; var _qsaObserver3 = qsaObserver({ query: shadowed, handle: function handle2(element, connected) { if (shadowRoots.has(element)) { if (connected) shadows.add(element); else shadows["delete"](element); if (_query.length) _parseShadow.call(_query, element); } } }), parseShadowed = _qsaObserver3.parse; var attachShadow = Element.prototype.attachShadow; if (attachShadow) Element.prototype.attachShadow = function(init2) { var root = attachShadow.call(this, init2); shadowRoots.set(this, root); return root; }; var _whenDefined2 = function _whenDefined22(name) { if (!_defined.has(name)) { var _, $ = new Promise(function($2) { _ = $2; }); _defined.set(name, { $, _ }); } return _defined.get(name).$; }; var _augment = attributesObserver(_whenDefined2, MutationObserver$1); var _override = null; getOwnPropertyNames(self).filter(function(k) { return /^HTML.*Element$/.test(k); }).forEach(function(k) { var HTMLElement2 = self[k]; function HTMLBuiltIn2() { var constructor = this.constructor; if (!_classes.has(constructor)) throw new TypeError$1("Illegal constructor"); var _classes$get = _classes.get(constructor), is2 = _classes$get.is, tag = _classes$get.tag; if (is2) { if (_override) return _augment(_override, is2); var element = _createElement.call(document$1, tag); element.setAttribute("is", is2); return _augment(setPrototypeOf(element, constructor.prototype), is2); } else return construct.call(this, HTMLElement2, [], constructor); } defineProperty(HTMLBuiltIn2.prototype = HTMLElement2.prototype, "constructor", { value: HTMLBuiltIn2 }); defineProperty(self, k, { value: HTMLBuiltIn2 }); }); document$1.createElement = function(name, options) { var is2 = options && options.is; if (is2) { var Class = _registry.get(is2); if (Class && _classes.get(Class).tag === name) return new Class(); } var element = _createElement.call(document$1, name); if (is2) element.setAttribute("is", is2); return element; }; customElements.get = getCE; customElements.whenDefined = _whenDefined2; customElements.upgrade = function(element) { var is2 = element.getAttribute("is"); if (is2) { var _constructor = _registry.get(is2); if (_constructor) { _augment(setPrototypeOf(element, _constructor.prototype), is2); return; } } upgrade.call(customElements, element); }; customElements.define = function(is2, Class, options) { if (getCE(is2)) throw new Error2("'".concat(is2, "' has already been defined as a custom element")); var selector; var tag = options && options["extends"]; _classes.set(Class, tag ? { is: is2, tag } : { is: "", tag: is2 }); if (tag) { selector = "".concat(tag, '[is="').concat(is2, '"]'); _prototypes.set(selector, Class.prototype); _registry.set(is2, Class); _query.push(selector); } else { define.apply(customElements, arguments); shadowed.push(selector = is2); } _whenDefined2(is2).then(function() { if (tag) { _parse(document$1.querySelectorAll(selector)); shadows.forEach(_parseShadow, [selector]); } else parseShadowed(document$1.querySelectorAll(selector)); }); _defined.get(is2)._(Class); }; } })(); Any ideas on how I could solve the problem?
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.