Load clientlibs multiple times for single component in page

[veerareddyc1015]

Dear Team,

I am currently working on a project that involves various components, such as single article and multiple article components, each associated with specific client libraries.

I am facing an issue while attempting to load the single article component multiple times on a single page. The client libraries load successfully for the first instance; however, subsequent attempts to load additional instances (2nd, 3rd, 4th, etc.) result in the client libraries not being loaded.

I am seeking clarification on whether it is possible to load the same client libraries multiple times on a single page. The reason behind this inquiry is that the Target team is replacing the first component with the Y component, and the subsequent components (2nd, 3rd, 4th, etc.) are expecting the relevant client libraries. The absence of these client libraries is causing UI distortion on the page.

I would greatly appreciate your insights and guidance on how to address this issue. If there are any recommended best practices or solutions to ensure the proper loading of client libraries for each instance, it would be immensely helpful.

Thank you in advance for your assistance.

Best regards,

Veera

[Kamal_Kishor]

@veerareddyc1015 : clientlibs are meant to be loaded once per page if added.

[ibishika · Accepted solution]

Hi @veerareddyc1015,

Although I have never tried this but I think you can try adding onload attribute like this for each of the component / section that loads later:

<meta data-sly-call="${clientLib.js @ categories='your.clientlib', loading='defer', onload='myFunction()'}" data-sly-unwrap></meta>

More details can be found here: https://github.com/nateyolles/aem-clientlib-async 

Regards,

Ishika B

[arunpatidar]

Hi @veerareddyc1015 
Clientlibs are meant to be loaded only once. If you need to load specific clientlibs on demand then you need to write a custom logic, for example on component replace event check the associated clientlibs and load again after component replaced.

You can write all these custome events in your main that loaded on all the pages javascript and target can trigger those events.

[kautuk_sahni]

@veerareddyc1015 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.