Issue when adding Component clientlib as embed in clientlib base

[Vani1012]

Hi All,

I have a clientlibrary(yp-poc.clientlibweather) for a component(suppose weather component) when I invoke clientlib in the component(suppose in weather.html)

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.all @ categories='YP-POC.clientlibweather'}">
</sly>

the css and js are working fine but when I added this clientlib as embed property in clientlib-base instead of calling clientlib inside component.html the css are disturbed and js isnt not all loading Can anyone help me on this issue.

Thanks,

Vani.

[sanketd27011989]

The CSS and JS may get due to redundant data or multiple loading.

[ShaileshBassi]

@Vani1012 Can you try loading the Javascript and the css separately. Could be the possibility that you are calling the javascript in the header and the DOM elements are not initialized yet.

You can separately call the css and the javscript by the below syntax:

FOR CSS, INCLUDE IN HEADER 
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.css @ categories='mysite'}" data-sly-unwrap/>

FOR JS, INCLUDE IN FOOTER
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='mysite'}" data-sly-unwrap/>

Hope this helps!

Thanks

[Vani1012]

• @ShaileshBassi I don't want to call css and js in header and footer I just want to embed the components clientlibrary in clientlib-base

[Aditya_Chabuku · Accepted solution]

Hi @Vani1012 , I understand you want to embed your custom clientlibs in clientlib-base, But by doing so you are unnecessarily increasing the load on base clientlibs and also it's not a good practice. 

However, to include your clientlibs as a dependency into the base at <yourProject>/ui.frontend/clientlib.config.js