I am used to of 'The Welkin Suite' editor for official development. I am not frequent user of VS code. Only using VS code for personal use. Yesterday I observed weird issue while deploying LWC component to my playground org.
I did copy paste code(bikeCard component) from trailhead(below link) and it deployed but was not available in AppBuilder. https://trailhead.salesforce.com/content/learn/modules/lightning-web-components-basics/push-lightning-web-component-files
I checked the config file and change the version as well but didn't work. Then I deploy same code based from 'The Welkin Suite' and able to see component in App Builder.
Please let me know if anyone faced same issue and have solution. Otherwise I will report bug to VS code.
bikeCard.html
<template>
<div>
<div>Name: {name}</div>
<div>Description: {description}</div>
<lightning-badge label={material}></lightning-badge>
<lightning-badge label={category}></lightning-badge>
<div>Price: {price}</div>
<div><img src={pictureUrl}/></div>
</div>
</template>
bikeCard.js
import { LightningElement } from 'lwc';
export default class BikeCard extends LightningElement {
name = 'Electra X4';
description = 'A sweet bike built for comfort.';
category = 'Mountain';
material = 'Steel';
price = '$2,700';
pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
}
bikeCard.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<!-- The apiVersion may need to be increased for the current release -->
<description>Description for Bike</description>
<masterLabel>bikeCard</masterLabel>
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>