Custom Lightning Component does not appear in Community Builder's Custom Component List

Question

I am experiencing an issue with a custom component that does not appear in the list of available components in the Community Builder. All of the required class controllers and Aura Bundles were deployed via change set from a development org into a full sandbox org. The custom component bundle references two other Lightning Component bundles as well so all 3 Aura bundles must be deployed together

A number of other custom Lightning components were also deployed from the developer org into the full sandbox in the same change set. All other custom components appear in the list of available components in the Community Builder. I have no visibility issue in the source org where the component was developed, only in the UAT org.

I can see the following error messages in the browser console when viewing the Community Builder:

aura_proddebug.js:24582 WARNING: $A.eventService.addHandler: Unknown component with globalId 'undefined'. Does this component exist?
(anonymous) @ aura_proddebug.js:24582
Logger.$notify$ @ aura_proddebug.js:4178
Logger.log @ aura_proddebug.js:4170
Logger.$warning$ @ aura_proddebug.js:4081
AuraInstance.$warning$ @ aura_proddebug.js:22514
AuraEventService.$addHandler$ @ aura_proddebug.js:17353
init @ Spa.js:72
init @ routerInitializer.js:23
Action.$runDeprecated$ @ aura_proddebug.js:10547
Component$getActionCaller @ aura_proddebug.js:7041
Aura.$Event$.$Event$.$executeHandlerIterator$ @ aura_proddebug.js:10173
Aura.$Event$.$Event$.$executeHandlers$ @ aura_proddebug.js:10147
(anonymous) @ aura_proddebug.js:10206
AuraInstance.$run$ @ aura_proddebug.js:22697
Aura.$Event$.$Event$.$fire$ @ aura_proddebug.js:10204
Component.$fire$ @ aura_proddebug.js:6452
Component @ aura_proddebug.js:5677
componentConstructor @ aura_proddebug.js:5329
AuraComponentService.$createComponentPriv$ @ aura_proddebug.js:15286
Component.$createComponentStack$ @ aura_proddebug.js:6720
Component.$setupAttributes$ @ aura_proddebug.js:6884
Component @ aura_proddebug.js:5663
componentConstructor @ aura_proddebug.js:5329
AuraComponentService.$createComponentPriv$ @ aura_proddebug.js:15286
Component.$setupSuper$ @ aura_proddebug.js:6777
Component @ aura_proddebug.js:5667
componentConstructor @ aura_proddebug.js:5329
AuraComponentService.$createComponentPriv$ @ aura_proddebug.js:15286
AuraClientService.$init$ @ aura_proddebug.js:12759
AuraInstance.$initPriv$ @ aura_proddebug.js:22332
(anonymous) @ aura_proddebug.js:22270
AuraInstance.$run$ @ aura_proddebug.js:22697
(anonymous) @ aura_proddebug.js:22269
aura_proddebug.js:24582 WARNING: $A.eventService.addHandler: Unknown component with globalId 'function () {
return this.$concreteComponentId$ || this.$globalId$
}'.

Does this component exist?

I have already made a number of attempts to resolve this issue including:

• Recompilation of all Custom Component related aura bundle files
• Redeployment of all Custom Component related aura bundle files and Apex controllers
• Browser cache refresh
• Verifying that (implements="forceCommunity:availableForAllPageTypes") has been included in all component files for the Custom Component.
• Recreating the Custom Component by copying the Aura Bundle code into a new set of bundles in the full sandbox. This also failed to display the Custom Component.

Has anyone else experienced this issue given the above conditions and what actions were taken to resolve this?

Let me know if more information is required.

Answer 1

This issue is due to the fact that there is a reference in the .CMP file to a type that does not exist in the ORG that the components were deployed to.

No validation is done on the .CMP on deployment with regards to this.

If you have this attribute definition:

<aura:attribute name="myAttribute" type="MyAttributeType" />

and MyAttributeType does not exist, you will have this issue.

The Lightning Component should really validate this scenario before it allows the code to be deployed to the server.

Answer 2

The Custom Component will not be visible on the Community unless you add the below tag to the component.

<aura:component implements="forceCommunity:availableForAllPageTypes" 
access="GLOBAL" >
</aura:component>

Answer 3

After working with Salesforce support, I have found the cause of this behaviour in the Community Builder.

There is an attribute declaration that looks like this:

<aura:attribute name="newAttribute" type="InvalidClass" />

This declaration references a Class that exists in the development org but is obsolete and was not included in the change set used to deploy the Aura Bundle.

This attribute line should have referenced the class that was included in the change set:

<aura:attribute name="newAttribute" type="ValidClass" />

Because the invalid class already existed in the development org, it was not causing any errors. Once deployed into the target sandbox however, this prevented the Custom Component from appearing in the Builder list.

What is concerning is that no validation was run on the Component during deployment.

If this had been an APEX class, there would have been a deployment error referencing an invalid type as InvalidClass itself would not have existed in the target org. The Lightning Component deployed without providing any errors despite the invalid reference to a class that did not exist, and it prevented the display of any subsequent Custom Component in the Community Builder afterwards.

Components should validate dependancies to prevent these scenarios from occurring.

Answer 4

Try downgrading API version of the component to 39.0 instead of 40.0. That did the trick for me.

Answer 5

I had an almost identical error message, but a different cause. I am posting this in case anyone comes across this question, but the accepted answer is not relevant for their situation.

In my instance I was making a call to a the server side apex controller in my client side helper, but forgot to reference "this" as the first parameter in the setCallback method. I had something like so:

action.setCallback(function(response) {...

When it should have been

action.setCallback(this,function(response) {

Simple mistake, but it also gave the following error in the browser console until I corrected it:

$A.eventService.addHandler: Unknown component with globalId 'undefined'. Does this component exist?

Adding "this" as the first parameter corrected the issue.