Custom User Actions - JS Injection dependency

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/211805

  •  16-12-2020
  •  | 
  •  

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?

Was it helpful?

Solution

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)

Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top