ReferenceError: Can't find variable for clientlib initialization

[Jeanmaradiaga]

We have multiple components with custom javascript, the way we include this clientlibs is by adding a script tag to the component's html file.

<script>
    window.bootstrap_component(function() {
        init_component_name();
    })
</script>

In our head.html we define the function bootstrap_component like so:

<script>
    window.bootstrap_component = function (handler) {
        if (typeof handler === 'function') {
            if (document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
                handler();
            } else {
                document.addEventListener("DOMContentLoaded", function() {
                    handler();
                });
            }
        }
    }
</script>

 This works just fine but for the past two years we have been getting bugs on and off from Bugsnag that say: 

ReferenceError: Can't find variable: init_component_name

The pages where this errors are reported work just fine, checking the browser console or the error logs from AEM has revealed nothing, no error messages, no warnings, nothing. Our current theory is that the function is being called before the page has loaded despite the safeguards in place and then again once the DOM loads. Is there anything we could do to further troubleshoot this?

[Anudeep_Garnepudi · Accepted solution]

Hi @Jeanmaradiaga 

The init_component_name() function is not declared within the script tag, that is the reason why you are getting ReferenceError: Can't find variable: init_component_name. 

<script>
    // No init_component_name function decleration here
    window.bootstrap_component(function() {
        init_component_name();
    })
</script>

This function(init_component_name) might have attached to window object thats why it is executing fine and you don't see any console errors. Hope you got it.

AG

[Jeanmaradiaga]

Thanks, that makes sense.

[Jeanmaradiaga]

Hi Anudeep, thanks for the reply. The reason we're doing like so is because we needed to be 100% sure that the scripts are not executing until the page has loaded. Ideally we don't want to copy the code to check for this on every component, thus why we attach it to the windows object. Do you think there any feasible workaround that satisfies both requirements? (getting rid of the error and not repeating the code)

[Anudeep_Garnepudi]

Try below code snippet, might help

<script>
    window.bootstrap_component(function() {
        window.init_component_name();
    })
</script>