0

Deploping on SharePoint Modern, I am using this React Content Query Web Part and added two of them on the page. One of them will need slick.js and another one is using masonry.js, both of which require jQuery. And in the "post render action" I will need to reference to "slick()" and "masonry()". Even though I have included the reference of jQuery both in these two web part, I still got error saying "$(...).slick is undefined." or "$(...).masonry is undefined." So I guess it might be that the loading of jQuery is not correct.

Later on I learned from this React Script Editor Web Part that we can use SP Loader to load the required external libraries at the beginning. So I wrote an app customizer to load jQuery, Slick and Masonry. But sometimes I can still got errors saying slick or masonry is not defined. I think the reason is that the loading of the scripts is asynchronous. Although SP loader will be the first part of the SharePoint Framework to load on a page, if other web parts are also loading external JavaScripts, there might be a problem if those JavaScripts are depending on the ones from the app customizer and the latter are loaded later.

My question is whether we can load the external JS sources to the page(which could be used for other web parts), prior to any other scripts in other components in SharePoint Framework?

Thank you in advance. Please let me know if I haven't explained well my question.

  • could you share the code you wrote to load the scripts? Any reason why you wouldn't be using externals? Lastly why are you using an application customizer to load dependencies for your webparts? – baywet Mar 8 at 16:50
1

Use React components instead of jQuery.

here is how to use Masonry:

https://github.com/eiriklv/react-masonry-component

and here is Slick:

https://react-slick.neostack.com/docs/get-started

both working well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.