unable to edit components in aem authoring page

[aem_noob]

hey guys,

I started working on a existing codebase which has bunch of JS errors coming in console by default.
when i started to tweak things around, the console still has same number of errors but this time I am not able to edit the components.

any suggestions what could cause the authoring experience to change?

thanks in advance

@aanchal-sikka, @arunpatidar, @Raja_Reddy, @EstebanBustamante, @Rohan_Garg 

[SureshDhulipudi]

Did you try Rebuild libraries and Invalidate Caches in dumblibs.rebuild.html ?

what are the console errors?

[aem_noob]

yes rebuilt all the libraries and invalidated all caches but no luck

Errors are as below -

a Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')

b 404 not found for png resources
c Uncaught ReferenceError: $jscomp is not defined at

/libs/cq/gui/components/authoring/dialog/clientlibs/all.js
d Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

[EstebanBustamante]

Hi, 

I think this behavior is expected. The problem must be related to the JavaScript errors you described, as the "edit options" layer is implemented using JavaScript, which likely fails to execute due to the presence of JavaScript errors occurring before it. I've observed this pattern as well, and typically resolving the JavaScript errors should address this issue as well. You can confirm this by removing the custom JavaScript code from the page (removing your custom client libraries), after which the "edit options" functionality should begin working again.

Hope this helps

[aem_noob]

But before my custom tweaks too the console errors were still there & edit layer was still loading

i removed my custom code and then tried still the issue persisted

so not sure how to proceed - only way is to reinstall the codebase

[EstebanBustamante]

When you mentioned removing your "custom code," are you indicating that you removed all of your custom JavaScript that was installed in the AEM instance? Or did you only remove the changes you made on top of the original faulty code? What I intended to convey is that the JavaScript issues you're encountering (which you updated previously) likely stem from some other custom code that was deployed. If you remove this custom or original code, the functionality should work. Otherwise, your AEM installation may be corrupt.

As I explained, this error: "Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')" will halt the execution of any further JavaScript. Therefore, it's highly probable that this is the main culprit. However, the other errors may also be causing your custom logic to malfunction.

[aem_noob]

@EstebanBustamante- removing all the custom files solved the issue but there is the main issue. when deploying originally the code even if riddled with errors is working fine, adding my custom js breaks the authoring - is that the correct behavior?

shouldn't it break when we deploy the committed code first time on the instance?

[EstebanBustamante]

Hi,

Of course, that is not the expected behavior. What I suggested clearly indicates that your code has a JavaScript issue, which is being loaded along with the Authoring client libraries. Therefore, you should check which client libraries you have customized and are causing the issue. However, narrowing down and tracing the error is something you need to do.

[Rohan_Garg]

Maybe your tweaks is causing the author's clientlibs for editing to not load anymore.

Can you try removing your tweaks and then see?

Also, are you adding any new custom clientlibs which could possibly be causing this?

[aem_noob]

removing my tweaks is not restoring the edit layer so thats not the thing

not sure why adding custom code will break the js layer but removing the changes won't restore

[Rohan_Garg]

Can you highlight the changes you are making particularly w.r.t clientlibs if any?

[Rohan_Garg]

Can you highlight the changes you are making particularly w.r.t clientlibs if any?

[aem_noob]

please check your inbox its a component with no sling model just sightly and js css
but removing this is not solving the problem

[Rohan_Garg · Accepted solution]

Try renaming your category - your folder's category is same as parent folder's site - This implies that on page load your clientlib might be called and not the parent one which has other dependencies. This can cause the JS to break and hence not load the editor JS.