0

Can anybody please help me out in solving this issue

ERROR IN LOCAL DEVELOPMENT ORG : Couldn't find the compiled component. If this component has a dependency on a component in the org or a component in a package in the org, test this component directly in the org.

HTML:

<template>
    <p>Hello World</p>
    <lightning-card>
        <lightning-layout multiple-rows>

            <!-- Nodes -->
            <lightning-layout-item size="12" padding="around-small">
                <lightning-progress-indicator current-step={currentNode} type="path" variant="base">
                    <template for:each={nodes} for:item="node">
                        <lightning-progress-step label={node.label} value={node.value} key={node.label}>
                        </lightning-progress-step>
                    </template>
                </lightning-progress-indicator>
            </lightning-layout-item>

            <!--Node Description -->
            <lightning-layout-item size="12" padding="around-medium">
                <lightning-formatted-rich-text value="Hello On Boarding"></lightning-formatted-rich-text>
                <lightning-formatted-rich-text value={currentDescription}></lightning-formatted-rich-text>
            </lightning-layout-item>

           <!-- Buttons --> 
            <lightning-layout-item size="12" padding="around-small" small-device-size="3" medium-device-size="6"
                large-device-size="3">
                <div class="slds-grid slds-gutters">
                    
                    <!-- Back Button -->
                    <div class="slds-col">
                        <template if:false={isStepOne}>
                            <lightning-button label="Back" class="slds-align_absolute-center" onclick={handleBack}>
                            </lightning-button>
                        </template>
                    </div>

                    <!-- Finish Button -->
                    <div class="slds-col">
                        <lightning-button label="Finish" class="slds-align_absolute-center" onclick={handleFinish}>
                        </lightning-button>
                    </div>
                    
                    <!-- Next Button -->
                    <div class="slds-col">
                        <template if:true={isFinished}>
                            <lightning-button label="Next" class="slds-align_absolute-center" onclick={handleNext}>
                            </lightning-button>
                        </template>
                    </div>
                </div>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

JAVA_SCRIPT:

import { LightningElement, wire, track} from 'lwc';
import getProcessNodes from '@salesforce/apex/OnBoardingHomePageController.getPNodes';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class OnBoarding extends LightningElement {
    @track nodes = [];
    @track currentNode;
    @track currentDescription;
    @track isFinished = false;

    // initialize component
  connectedCallback() {
    this.currentNode = 1;
    this.currentDescription = this.nodes.find(n => n.value === this.currentNode).description;
  }

    @wire(getProcessNodes)
    wiredProcessNodes({data, error}){
        if(data){
            data.forEach((element, index) => {
                const node = {};
                node.label = element.Name;
                node.value = index + 1;
                node.description = element.Content__c;
                console.log(node);
                this.nodes.push(node);
            });           
 
        } else if(error){
            console.log("Eroor at fetching");
            this.showToast('ERROR', error.body.message, 'error');
        }
    }


    handleNext(){
        this.isFinished = false;
        if(this.currentNode == this.nodes.length)
        {
            alert("Your on Final Step CAn't go further");
        }
        else{            
            this.currentNode++;
            this.currentDescription = this.nodes.find(n => n.value === this.currentNode).description;
        }   
    }

    handleBack(){
        if(this.currentNode == 1)
        {
            alert("Your on First Step CAn't go back");
        }
        else
        {
            this.currentNode--;
            this.currentDescription = this.nodes.find(n => n.value === this.currentNode).description;
        }
    }

    // get currentDescription(){
    //     return this.nodes.find(n => n.value === this.currentNode).description;
    // }

    handleFinish(){
        this.isFinished = true;
        alert("Finished Step"+this.currentNode);
    }

    get isStepOne() {
        return this.currentNode === 1;
    }
    
    get isFinished() {
        return this.isFinished;
    }

    showToast(title, message, variant) {
        const evt = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
        });
        this.dispatchEvent(evt);
    }

    
}

XML:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>
4
  • Your code has a number of problems. While I was not able to replicate the specific error, I'm not surprised you're having problems. You have a duplicate isFinished property, you're trying to access a wire property in the connectedCallback (they are never available until after the first renderedCallback() hook, because calls are asynchronous, and connecting to the DOM is a synchronous process). Try fixing the problems above, and see if that helps.
    – sfdcfox
    Jan 11 at 18:09
  • Thanks a lot for you comments, Actually I am a beginner, just started learning LWC Jan 11 at 18:26
  • I have one doubt how can we assign a default value to track property when the component loads Jan 11 at 18:27
  • @track nodes = []; is how you assign a default value. You can also assign a value in connectedCallback
    – sfdcfox
    Jan 11 at 18:43

Your Answer

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

Browse other questions tagged or ask your own question.