[SalesForce] Lightning web components issue with SFDX push and pull

I Create an sfdx scratch org using Quick Start: Lightning Web Components
. I also created a sample hello world lightning web component and pushed it to the scratch org and everything works fine as I was able to preview my hello world lwc in the app builder. I also created an aura component from dev console and was able to pull it to vscode.

Now here comes the issue, Later I created couple of more lwc from the vscode and used push command after saving them, then It shows me what was pushed to the scratch org and everything was fine, but when I actually went to the app builder page of the scratch org that the code was pushed I don't see the newly pushed Lightning web components. Also every time I try to push some deltas I can see the deltas getting pushed.

How do I verify this issue? At least for aura components I can look into lightning resources to see the components but for lwc Im not sure of a way to verify whether they are pushed or not.

Below are the commands used:

sfdx force:source:push // for push

sfdx force:source:pull // for pull

Note: I was able to see the actual lightning web components in the force-app folder in my local host.

PS: From your scratch org

  • setup
  • Lightning component
  • opens a list view where you can see aura components and lwc and I can see all the lwc

Even though all the lightning web components are available in the org,
I was not able to see them in the app builder except for the first
one!

Best Answer

Solved the issue by defining the targets definition in the xml file of the lightning web component.

From the Developer Guide:

There are a few steps to take before you can use your custom Lightning web components to create a Lightning page in Lightning App Builder. One of them is Define Component Metadata in the Configuration File

The .js-meta.xml file defines the metadata values for the component, including the design configuration for components intended for use in Lightning App Builder. Edit the configuration file to:

  • Define what types of Lightning pages your component can be used on.
  • Configure your component’s properties.
  • Set your component’s supported objects.
  • Make the component usable outside of your own org.

Added Definition:

  <targets>
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
  </targets>
Related Topic