how to use external js library with Aura?

Question

I've added

<script language="javascript" type="text/javascript" src="../js/Chart.bundle.js"></script>  

in aura:application file, file is downloaded by browser (can see that thru console) but when i try to create Chart object in afterRender function in Renderer

var myChart = new Chart(ctx, { .....

I've got an error:

Something has gone wrong. afterRender threw an error in 'markup://helloWorld:helloWorld' [afterRender threw an error in 'markup://c:ltGraph' [ReferenceError: Chart is not defined]] Failing descriptor: {markup://helloWorld:helloWorld} Error at new (http://localhost:8080/auraFW/javascript/lG7eYFZ_MXfCccXumk95LQ/aura_dev.js:3152:23) at http://localhost:8080/auraFW/javascript/lG7eYFZ_MXfCccXumk95LQ/aura_dev.js:1:1. Please try again.

How to use external libraries in Aura ?

Answer 1

I've found the problem. My code wanted to use library before it was loaded. I have to put some checks in my js code (renderer)

var timesToCheck = 10;
var poll = function () {
    setTimeout(function () {
        timesToCheck--;
        if (typeof Chart !== 'undefined') {

            // now you can use Chart (or other) library.....

        } else if (timesToCheck > 0) {
            poll();
        } else {
            console.log('giving up')
        }
    }, 100);
};
poll();

(code taken from https://developer.salesforce.com/forums/?id=906F0000000Amaz )

But still, i have a problem with loading 2 dependent libraries (like jQuery and Flot). Quite often there is an error that jQuery is undefined during a Flot initialization.....