LWC Not Redering HTML

Question

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.

Answer 1

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:

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

Answer 2

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.