Salesforce LWC component is not available in the list of custom component

When an LWC (Lightning Web Component) is not showing up in the list of custom components in your Salesforce App Builder, it typically means there is an issue with the configuration file (.js-meta.xml) or the component's registration within Salesforce. Here are some steps to troubleshoot and resolve this issue:

1. Check the Configuration File: Ensure that the .js-meta.xml file of your LWC component is correctly set up to make the component available in the Lightning App Builder.

   Here’s an example of how the .js-meta.xml file should look:

   xml
   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
       <apiVersion>59.0</apiVersion> <!-- Use your Salesforce API version -->
       <isExposed>true</isExposed>
       <targets>
           <target>lightning__AppPage</target>
           <target>lightning__RecordPage</target>
           <target>lightning__HomePage</target>
       </targets>
   </LightningComponentBundle>
   

   • isExposed: Should be set to true to make the component available in the Lightning App Builder.
   • targets: Include the appropriate targets (lightning__AppPage, lightning__RecordPage, lightning__HomePage) based on where you want the component to be available.

2. Check Deployment: Ensure that the component and its metadata have been successfully deployed to your Salesforce org. Sometimes deployment issues might prevent the component from being recognized.

3. Clear Cache: Clear your browser cache and try accessing the App Builder again. Sometimes, caching issues can cause components not to show up immediately after deployment.

4. Check User Permissions: Verify that the user profile you are using has the necessary permissions to see and use custom components. Ensure that the necessary permissions are granted for the component if they are restricted.

5. Component Names and File Locations: Ensure that there are no typos in the component name or the directory structure. The component's name should be correctly reflected in all files, and the files should be located in the correct directories.

6. Salesforce API Version: Ensure that the apiVersion in the .js-meta.xml file matches the version supported by your Salesforce org. Using an incorrect API version can sometimes cause issues.

Here’s a quick checklist to verify:

• The .js-meta.xml file has isExposed set to true.
• The appropriate targets are specified in the .js-meta.xml file.
• The component is correctly deployed to the Salesforce org.
• Browser cache has been cleared.
• User profile has the necessary permissions to access the component.

If you have verified all these points and the component is still not visible, you may need to check the Salesforce documentation or reach out to Salesforce support for further assistance.