Plugin Development: "Error: undefined missing" when loading external JS

[almyz125]

Hello,

I'm developing a plugin that embeds a piece of JavaScript on the customer support portal in Jira Service Desk. The JS widget is provided by Chatlio which offers a live chat bubble. The JS that my plugin embeds page loads more JS resources from Chatlio's servers. I assume Chatlio does this so they can keep their chat widget updated without redistributing a bunch of JS code. The error "Error: undefined missing", seems to be thrown by "batch.js" which seems to be native to Jira. This causes the JS required by the Chatlio widget to fail.

Here is the JS that my plugin loads as a web resource within the "customerportal" context:

(function ($) { // this closure helps us keep our variables to ourselves.
    console.debug("chatlio-portal-chat-resources loaded!");
    // This pattern is known as an "iife" - immediately invoked function expression
    // wait for the DOM (i.e., document "skeleton") to load. This likely isn't necessary for the current case,
    // but may be helpful for AJAX that provides secondary content.
    $(document).ready(function () {
        // form the URL
        var url = AJS.contextPath() + "/rest/chatlio-portal/1.0/";
        var widgetId = false;
        // request the config information from the server
        $.ajax({
            url: url,
            dataType: "json"
        }).done(function (config) { // when the configuration is returned...
            console.debug(config);
            if (config.widget_id !== "" && config.widget_id && config.widget_id !== null) {
                widgetId = config.widget_id;
            }
            if (widgetId) {
                console.debug("Widget ID is: " + widgetId);
                window._chatlio = window._chatlio || [], function () {
                    var t = document.getElementById("chatlio-widget-embed");
                    if (t && window.ChatlioReact && _chatlio.init) _chatlio.init(t, ChatlioReact); else {
                        for (var e = function (t) {
                            return function () {
                                _chatlio.push([t].concat(arguments))
                            }
                        }, i = ["configure", "identify", "track", "show", "hide", "isShown", "isOnline", "page"], a = 0; a < i.length; a++) _chatlio[i[a]] || (_chatlio[i[a]] = e(i[a]));
                        var c = document.createElement("script"), o = document.getElementsByTagName("script")[0];
                        c.id = "chatlio-widget-embed", c.src="https://w.chatlio.com/w.chatlio-widget.js", c.async = !0, c.setAttribute("data-embed-version", "2.3"), c.setAttribute("data-widget-id", widgetId), o.parentNode.insertBefore(c, o)
                    }
                }();
            }
        });
    });
})(AJS.$ || jQuery); 

This is what the JS looks like when provided by Chatlio:

window._chatlio = window._chatlio||[];
    !function(){ var t=document.getElementById("chatlio-widget-embed");if(t&&window.ChatlioReact&&_chatlio.init)return void _chatlio.init(t,ChatlioReact);for(var e=function(t){return function(){_chatlio.push([t].concat(arguments)) }},i=["configure","identify","track","show","hide","isShown","isOnline", "page"],a=0;a<i.length;a++)_chatlio[i[a]]||(_chatlio[i[a]]=e(i[a]));var n=document.createElement("script"),c=document.getElementsByTagName("script")[0];n.id="chatlio-widget-embed",n.src="https://w.chatlio.com/w.chatlio-widget.js",n.async=!0,n.setAttribute("data-embed-version","2.3");
       n.setAttribute('data-widget-id','<Widegt-ID-Here>');
       c.parentNode.insertBefore(n,c);
    }();

 This is what my browser's console looks like when loading the customer support portal:

You can see that some of the JS provided by Chatlio works load, but another script (https://w.chatlio.com/v5/vendor/chatlio.min.7ab10269.js) required by the widget fails to load

I should note that the JS in the second block of code that I posted, runs perfectly on other websites. Is there something within Jira that prevents JS from loading from external domains? Has anyone run into something like this before? Any help would be greatly appreciated.

[Tom Crocker]

Hi Alex,

Tom from Chatlio support here :)

Can you try to add the following to the embed code?

n.setAttribute('data-widget-options', '{"skipRequireLoad": true}');

Also please feel free to chat with us any time over at https://chatlio.com if you run into any other issues.

Best,

[opdev io]

Hi Tom,

Thanks for replying to this. I spoke with you guys via chat after posting this and that attribute did solve the issue. Apologies for not updating this thread.

[Tom Crocker]

No problem! Glad you got it solved.