Search code examples
javascriptcommand-line-interfacebigcommercecompiled

"Uncaught TypeError: Cannot read property 'ready' of undefined" error in datatags.js when customising a BigCommerce theme using Cornerstone

I'm working on a customised BigCommerce theme using Cornerstone as a starting point to customise from. I have been using CLI to add JavaScript libraries via NPM.

Following this, the build compiles without errors & runs in my local host environment, but there is an error in console that is stopping my jQuery from working.

The Error is within the compiled file generated by Stencil called datatags.js

My JS isn't the strongest so would appreciate any advice on this one.

I have tested my JS functions as working ok by adding the jQuery library as a linked resource in the <head> of the page via their CDN.

The issue seems to have arisen following jQuery being installed via NPM. The error is triggered by the a.ready(function() on line 5 of the code snippet below.

window.initDataTags = function(o, i, a) {
    const r = ["data-banner-id", "data-entity-id", "data-event-type", "data-list-name", "data-name", "data-position", "data-product-brand", "data-product-category", "data-product-price", "data-product-sku", "data-product-variant", "data-currency-code"].concat(o).concat(i);
    t = o,
    n = i,
    a.ready(function() {
        setTimeout(function() {
            const t = [];
            c(document.body.querySelectorAll(u), function(n) {
                t.push(n)
            }),
            d(t, a),
            new MutationObserver(function(t) {
                const n = [];
                function o(t) {
                    e(t, u) && n.push(t),
                    c(t.querySelectorAll(u), function(t) {
                        n.push(t)
                    })
                }
                c(t, function(t) {
                    "childList" === t.type ? c(t.addedNodes, function(t) {
                        t instanceof Element && o(t)
                    }) : "attributes" === t.type && o(t.target)
                }),
                d(n, a)
            }
            ).observe(document.body, {
                childList: !0,
                attributes: !0,
                subtree: !0,
                attributeFilter: r
            })
        }, 100)
    })
}

The console error is:

Uncaught TypeError: Cannot read property 'ready' of undefined.

I can't share a URL as this is running on my local environment.

Solution

  • This script has to do with the bigcommerce tracking scripts, and only shows when developing locally. I have never had it cause any issues, besides making the console dirty. The source is {{{footer.scripts}}} in base.html - you can remove it but then other scripts in the script manager footer wont fire.