Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

Text component can't be loaded correctly

Avatar

Level 7

Hi All,

 

I am trying to insert an OOTB Text component onto my page, and it can't be loaded correctly. Initially I was trying to create my own RTE component, but then I figured it can't display even with extensive help from a user(https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/granite-ui-component-in-st.... Thanks, @EstebanBustamante ! Then I tried it on a local AEM instance, and it works. The unsuccessful one fails to load the correct CSS.

Here is the spec of two instances:

failing instance: 6.5.11.0 (remote server)

successful instance: 6.5.0 (local)

 

They all load the same css and js, except 6.5.0 loads the regular ones, 6.5.11.0 loads the minified ones.

I take the following page as my test one by inserting an OOTB Text component into a Parsys:

http://localhost:4502/editor.html/content/we-retail/language-masters/en/products/equipment/surfing.h...

 

These are the screenshots for successful one (local instance)

Screen Shot 2023-06-08 at 8.42.51 AM.pngScreen Shot 2023-06-08 at 8.51.51 AM.png

 

These are the screenshots for the failing one (remote instance)

Screen Shot 2023-06-08 at 8.45.34 AM.pngScreen Shot 2023-06-08 at 8.52.06 AM.png

 

We can see the successful one is loading `class="cq-RichText-editable coral-RichText-editable coral-RichText coral-DecoratedTextfield-input is-edited webkit chrome"`, another one is loading `class="coral-Form-field"`. There are other css properties fail to load such as the menu, I consider they belong to the same issue.

 

Can anyone please help? Thanks!

 

-kt

6 Replies

Avatar

Community Advisor

Do you see any errors in the browser console? Maybe there is an issue with the minification process, I would start checking if there are any issues in the console, and maybe the resources(CSS) are not loaded due to that, or I would play with the minification where it is working and where is not, to discard that is the problem. 



Esteban Bustamante

Avatar

Community Advisor

Hello @kevingtan 

 

To rule out the issue with the AEM's OOTB functionality, I would suggest to first try on Vanilla instance.

1. Try RTE on 6.5.0, with no custom code, minification on

2. Try RTE on 6.5.0, with no custom code, minification off

3. Try with 6.5.11, no custom code, minification on

4. Try with 6.5.11, no custom code, minification off

 

If in either case, their is any issue, please raise a support ticket. Please use Incognito tab in each test

 


Aanchal Sikka

Avatar

Level 7

Hi @EstebanBustamante ,

No, I don't find any related error messages on 6.5.11.0.

 

@aanchal-sikka ,

6.5.0 runs on both regular and minified modes, while 6.5.11.0 fails on both. 

Avatar

Level 7

I figured it isn't the version issue. I unpacked the 6.5.0 jar file, uploaded the the aem-service-pkg-6.5.11.zip and installed it. The we.retail shows the correct Text component. What's strange I uninstalled the 6.5.11.0 package from the other problematic instance, it still shows 6.5.11.0, even if my jar is 6.5.0, but this is unrelated to my original issue.

 

My best guess the problem may come from my customized bundle, which has the old 6.0 code. It will be another long journey to troubleshoot it. 

 

-kt

Avatar

Level 7

I eventually figured out the cause of this issue. We have a transformer manipulating some html tags, the pipeline entries are:

 

<generator-htmlparser

        jcr:primaryType="nt:unstructured"

        includeTags="[A,/A,IMG,UL,/UL,DIV,/DIV,LINK,SCRIPT,BODY,/BODY,META,FORM,/FORM]"/>

 

Not all the tags have a conflict with the text and rte components, only DIV and /DIV. The transformer is also in 6.0, I wonder why it only affects the components in 6.5. Maybe the runtime html injection from the components containing the DIV and /DIV.

 

-kt

Avatar

Community Advisor

Glad you figure it out, 



Esteban Bustamante