0

I am starting out creating a lighting web component, following the Hello World Example. I have set up a Sandbox environment and Authorised the org in VS Code. I have set up a project with manifest and retrieved manifest from org using SFDX I then create an LWC and set up the 3 files and respectively..

.html

<template>
  <lightning-card title="HelloWorld" icon-name="custom:custom14">
    <div class="slds-m-around_medium">
      <p>Hello, {greeting}!</p>
      <lightning-input
        label="Name"
        value={greeting}
        onchange={changeHandler}
      ></lightning-input>
    </div>
  </lightning-card>
</template>

.js

import { LightningElement } from "lwc";
export default class HelloWorld extends LightningElement {
  greeting = "World";
  changeHandler(event) {
    this.greeting = event.target.value;
  }
}

.xml

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Which are just cut and paste from examples. These reder well in playground (although the xml file is not required.

My problem is when I deploy the code to Salesforce and then render the component, it has no html below the component element

[From Chrome Dev Tools]

<div data-component-id="helloWorld" data-aura-rendered-by="637:0" class="flexipageComponent" data-aura-class="flexipageComponent">
<c-hello-world data-data-rendering-service-uid="227" data-aura-rendered-by="639:0"></c-hello-world>
</div>

I am a bit stuck how to debug this, it seems the code is not being rendered properly. I'd appreciate some guidance about how to attack this problem.

3
  • 1
    That's odd. I copy-pasted this to my VS Code, dropped in a Lightning App, and it renders correctly (and works as expected). Try making a scratch org or try another org and see if this problem persists. If you'd like, I can make you a gist with my exact files.
    – sfdcfox
    Mar 29 '20 at 3:53
  • How did you try to render the component? The component works as expected and visible in the DOM when I tried.
    – SfdcBat
    Mar 29 '20 at 3:53
  • I added it in the Visual Force Page builder to the standard Sales Page. The component renders an empty html element both in the Web Designer and the actual page.
    – wbm
    Mar 29 '20 at 4:14
0

I have tried the code you have posted in the question,tried it works for me

html:

   <template>
<lightning-card title="HelloWorld" icon-name="custom:custom14">
  <div class="slds-m-around_medium">
    <p>Hello, {greeting}!</p>
    <lightning-input
      label="Name"
      value={greeting}
      onchange={changeHandler}
    ></lightning-input>
  </div>
</lightning-card>

Js:

 import { LightningElement } from "lwc";
 export default class Greeting extends LightningElement {
    greeting = "World";
    changeHandler(event) {
      this.greeting = event.target.value;
    }
}

Output:

enter image description here

If i check your error you posted

  <div data-component-id="helloWorld" data-aura-rendered-by="637:0" class="flexipageComponent" data-aura-class="flexipageComponent">
  <c-hello-world data-data-rendering-service-uid="227" data-aura-rendered-by="639:0"></c-hello-world>

why these component with Kebab case notation error "c-hello-world" ? seems like you posted wrong error

8
0

Complete noob issue. I didn't save all in VS Code and it was sending a blank html file in.

Oh well, the only way is up.

It'd be good to understand if there is a way to view the files on the server.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.