Hi Raj, i am not trying to invoke a component in the mark up. iam trying to deploy the one of the playground app into org via visual studio folder name/project name - app, lwc name - app, all file names - app.html, app.js, app.js-meta.xml app.html <template> <div class="slds-p-around_x-large"> <h1 class="slds-text-heading_large">{state.title}</h1> <div class="slds-p-around_medium"></div> <p class="slds-text-heading_medium">Playground now</p> <lightning-combobox options={options} value="supports"></lightning-combobox> <lightning-button label='SLDS' icon-name="action:announcement"> </lightning-button> <div>and</div> <lightning-badge label="Lightning Components"> </lightning-badge> <lightning-helptext content="isn't that cool?"> </lightning-helptext> </div> </template> app.js import { LightningElement, track } from 'lwc'; export default class App extends LightningElement { @track state = { title: 'Welcome to Lightning Web Components Playground!', }; get options() { return [ { label: 'supports', value: 'supports', }, { label: 'has ability to show', value: 'shows', }, ]; } } app.js-meta.xml
I got the same error like that and later found out that all component files have to have the exact same name as the project folder. Give it a try to see if it helps.
For Example, if your component Name TodoItem them your Component name should be like <c-todo-item> //
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_components_compose
like below
iam trying to deploy the one of the playground app into org via visual studio
folder name/project name - app, lwc name - app, all file names - app.html, app.js, app.js-meta.xml
app.html
<template>
<div class="slds-p-around_x-large">
<h1 class="slds-text-heading_large">{state.title}</h1>
<div class="slds-p-around_medium"></div>
<p class="slds-text-heading_medium">Playground now</p>
<lightning-combobox options={options} value="supports"></lightning-combobox>
<lightning-button label='SLDS' icon-name="action:announcement">
</lightning-button>
<div>and</div>
<lightning-badge label="Lightning Components">
</lightning-badge>
<lightning-helptext content="isn't that cool?">
</lightning-helptext>
</div>
</template>
app.js
import { LightningElement, track } from 'lwc';
export default class App extends LightningElement {
@track
state = {
title: 'Welcome to Lightning Web Components Playground!',
};
get options() {
return [
{
label: 'supports',
value: 'supports',
},
{
label: 'has ability to show',
value: 'shows',
},
];
}
}
app.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="app"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>
Thanks
Can you do an sfdx push with forceoverwrite
I got the same error like that and later found out that all component files have to have the exact same name as the project folder. Give it a try to see if it helps.
Bao.