AEM 65 - Touch UI RTE (Rich Text Editor) Dialog Color Picker Plugin - Throwing Handlebars.compile error in XF pages

[VeenaVikraman]

Hi Team

   We are using the Color Picker plugin (Refer )  developed and provided by Sreekanth . The plugin works fine in our pages, but while using the color-picker in the XF pages, it is not loading in the RTE and  we are getting Handlebars.compile is not a function issue in the console. Has anyone faced a similar issue ? Any help is appreciated

TIA
Veena

[arunpatidar]

Hi @VeenaVikraman 

try with https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html

[VeenaVikraman]

I will try this and let you know @arunpatidar. Thanks for quick reply.

[arunpatidar]

@VeenaVikraman check this as well https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/uncaught-typeerror-handleb...

[VeenaVikraman]

@arunpatidar The plugin you provided is also having the same issue. It is not working in Experience Fragment pages. Throwing the same Handlebars.compile issue.

[Anudeep_Garnepudi · Accepted solution]

Hi @VeenaVikraman 

Check /etc.clientlibs/clientlibs/granite/handlebars.js loading in your XF page or not.

[Farnain]

hi , it is not loading , what can i do ?

[VeenaVikraman]

The color-picker doesn't work in Experience Fragment (XF) pages since the Handlebar js is not available there and underscore (clientlibs added as dependency in the picker) doesn't have Handlebar.compile module. I was trying with handlebars as dependency all the time after reading it somewhere, but after some debugging ( thanks to my co-worker) I could figure out that the dependency which had handlebar in AEM is cq.handlebars. 

So anybody facing Handlebars.compile is not a function issue in the future, please add cq.handlebars as additional dependency to your clientlibs

Thanks

Veena

[arunpatidar]

Thanks for sharing Veena

[AkankshaPratihar]

Hi @VeenaVikraman  @arunpatidar 

Using AEM 6.5 AACS and following blog http://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html  (had to remove underscore dependency), even after adding cq.handlebars dependency Handlebars.compile is throwing Handlebars.compile is not a function error. This issue is happening only on XF, I can see that rest of the handlebars functions are available on XF too(please refer to screenshot below). It works fine on content page though. Any suggestions ?

 

[AkankshaPratihar]

resolved by adding cq.tsdk.handlebars as dependency instead of cq.handlebars

[luongpham1994]

Thanks @AkankshaPratihar . It worked as your solution.

[Bhargav1817]

@VeenaVikraman Thanks for sharing the solution