I am new to LWC, I tried to create a very simple component which is supposed to show a value from App Builder configuration and show slds icon.
However, the error message Error during LWC component connect phase: [headerName is not defined] is showing up. how to fix this?
- header.html
<template> <lightning-card variant="Narrow" title={headerTitle} icon-name={iconName}> </lightning-card> </template> - header.js
import { LightningElement, api } from 'lwc'; export default class Header extends LightningElement { @api headerName; @api headerIconType; @api headerIconName; headerTitle = ''; iconName = ''; connectedCallback() { this.headerTitle = headerName; this.iconName = headerIconType + ':' + headerIconName; } } - header.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>55.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> <targetConfigs> <targetConfig targets="lightning__RecordPage,lightning__AppPage,lightning__HomePage"> <property label="headerName" name="headerName" type="String" required="true"/> <property label="headerIconType" name="headerIconType" type="String" required="true" datasource="Utility, Doctype, Standard, Custom, Action"/> <property label="headerIconName" name="headerIconName" type="String" required="true"/> </targetConfig> </targetConfigs> </LightningComponentBundle> 
