Custom User Actions - JS Injection dependency

Question

Instead of modifying the master page, I've injected the following custom actions to add references to JavaScript files on my page:

• jquery-1.12.4.min.js (Sequence=1000)
• bootstrap-3.3.7.min.js (Sequence=1001)
• myCustomJS.js (Sequence=1002)

As you can see, I have jQuery (1000) first, followed by Bootstrap (1001) then my custom script (1002). When the site loads however, I get the following error:

Uncaught Error: Bootstrap's JavaScript requires jQuery

So it seems jQuery hasn't loaded completely yet before Bootstrap ran. My custom script also runs into the issue where it can't resolve what $ or jQuery is. Any ideas on how to resolve this?

Answer 1

UserCustomAction scripts load async

So indeed, that 90KB jQuery is still loading when the rest is pulled in

Apart from using a dynamic loader and execute them in sequence,
is to combine them into one file.

You can use all the fancy "new" tools like Gulp for that.
or, on windows, open a CMD prompt, and do:

copy /b jquery.min.js + bootstrap.min.js + myCustomJS.js   myCustomBundle.js

Then you only load myCustomBundle.js with a UserCustomAction

---

https://github.com/tavikukko/Chrome-SP-Editor

Do use Tomi Tavelas SP Editor Chrome Extension for maintaining UserCustomActions (and way more)