getFieldValue Does Not Display Field Value Inside Div Element in Salesforce LWC

Question

To directly get a custom text field value in Account object, I used the getFieldValue. But upon displaying value inside div element in HTML file, value does not display at all. I also used @wire decorator but nothing shows up upon page load.

accountLWC.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

import CUSTOMTEXT_FIELD from '@salesforce/schema/Account.CustomText__c';

const fields = [CUSTOMTEXT_FIELD];

export default class WireGetValue extends LightningElement {
    @api recordId;

    @wire(getRecord, { recordId: '$recordId', fields })
    account;

    get customText() {
        return getFieldValue(this.account.data, CUSTOMTEXT_FIELD);
    }
}

accountLWC.html

<template>
    <lightning-card title="WireGetFieldValue"icon-name="standard:account">
        <div if:true={account.data}>
            <div class="slds-m-around_medium">
                <label>Custom Text</label>
                <div>{customText}</div>
            </div>
        </div>
    </lightning-card>
</template>

I hope someone could help me on this. Thanks in advance!

Answer 1

The code works perfectly fine in my dev org.

Check a couple of things

1. Make sure your user has permission to the custom field.

2. Make sure the CustomText field has the value assigned.

3. Verify target config is provided to the component metadata

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