ChartJS 4 in Widget - Include error

[Jakob O]

Hello,

i want to use ChartJS 4 inside my Widget. However, the following bug occurs with the new version of ChartJS:

If i link the dependency with an URL it works just fine:

This works fine

But i need to link my dependency statically with an UI-Script like this:

Suddenly the Chart stops working. The background with the metrics will still be loaded, but the values won't. In addition I get an "Can't read properties of undefined" Error in the browser console while hovering over the Chart:

I assume that the Error occurs from a bug in the Rhino interpreter, because there shouldn't be an undifined Error, since the library just works fine with URL linking? 

Also the Problem did not occur with ChartJS version 2, just with version 4.

Does someone had similar problems including js libraries?

Thanks in advance

[mak1A4 · Accepted solution]

I had the same issue and struggled for a while to find a solution. The issue seems to be that ServiceNow doesn't load UI-Script Dependencies the same way it loads a URL Dependency. I never found out in detail whats really causing these issues but the Solution is to build a "fake cdn" as a scripted rest api.

1. Create UI Script with the source from https://cdn.jsdelivr.net/npm/chart.js

2. Create Scripted Rest API

3. Create Scripted Rest Resource (HTTP Method: GET)
4. Add the following script to the Scripted Rest Resource

(function process(request, response) {

    var uiScriptSysId = gs.getProperty("your_ui_script_sys_id_property");
    var grUiScript = new GlideRecord('sys_ui_script');
    if (grUiScript.get(uiScriptSysId)) {
        response.setContentType("application/javascript; charset=utf-8");
        response.setStatus(200);
        response.getStreamWriter().writeString(grUiScript.getValue("script"));
    } else {
        return "ui script not found";
    }

})(request, response);

5. Create Widget Dependency and instead of the CDN URL use the URL of your Scripted REST Resource e.g. "/api/x_aeaxg_myapp/fake_cdn/chartjs"
6. Add Widget Dependency to your Widget and you should be able to use `new Chart()` from ChartJS

[Jakob O]

Thats a good workaround. Looks like there is no other solution at the moment. Thank you.