forcedotcom / lwc-dev-server-feedback

LWC Local Development
BSD 3-Clause "New" or "Revised" License
45 stars 10 forks source link

Components using Vlocity Namespace can't be compiled #125

Closed AllanOricil closed 1 year ago

AllanOricil commented 2 years ago

Describe the bug

Im working on a project which uses VLocity. I created a component that is currently using one single method from the Vlocity namespace, called "fetchCustomLabels". Because of that I also had to set my component to use the "vlocity_cmt" namespace. The component works perfectly on my org but when I access it on the dev server it throws a compilation error. And I think the reason for that to happen is because the compiler can't resolve the "import { fetchCustomLabels } from "vlocity_cmt/utility";" as this library comes from a package, which is not present in the current working directory, but it is installed on my org. I can't conclude with certainty what is causing the compilation error because the error message does not say what is happening. Look below what I see

image

Here is an image of the component working on the org

image

To Reproduce

/*eslint-disable @lwc/lwc/no-inner-html, no-unused-vars, consistent-return*/

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

const QUESTION_SHEET = 'Case.QuestionSheet__c';

export default class TroubleshootFlowResult extends LightningElement {
    @api
    recordId = '5000Q00000FqJ85QAF';

    questions;
    record;
    errors;

    staticCustomLabels = [
        'couldNotFindCustomLabel'
    ]

    @wire(getRecord, {
        recordId: '$recordId',
        fields: [QUESTION_SHEET]
    })
    fetchCaseRecord({ error, data }) {
        if(error){
            this.errors = reduceErrors(error);
            console.error('Error loading the Record', error);
        }else if(data){
            this.record = data;
            const questionSheet = getFieldValue(this.record, QUESTION_SHEET);
            if(questionSheet) {
                const questions = JSON.parse(questionSheet.replace(/"/g, '"'));
                return fetchCustomLabels([...this.getCustomLabels(questions), ...this.staticCustomLabels])
                .then((customLabels) => {
                    this.questions = this.prepareQuestions(questions, customLabels);
                })
            }
            this.questions =  null;
        }
    }

    prepareQuestions(questions, customLabels) {
        questions.forEach((entry) => {
            entry.Label = customLabels[entry.CustomLabel] || customLabels.couldNotFindCustomLabel;
            entry.Options.forEach((option) => {
                option.Label = customLabels[option.CustomLabel] || customLabels.couldNotFindCustomLabel;
                option.Class =
                    'option slds-text-align_center slds-m-right_x-small ' +
                    (option.Value === entry.Value ? 'answer' : '');
            });
        });

        return questions;
    }

    getCustomLabels(questions){
        const customLabels = new Set();

        questions.forEach((entry) => {
            if(entry.CustomLabel) customLabels.add(entry.CustomLabel);
            entry.Options.forEach((option) => {
                if(option.CustomLabel) customLabels.add(option.CustomLabel);
            });
        });

        return Array.from(customLabels);
    }

    get isLoading() {
        return !this.errors && !this.record;
    }
}

function reduceErrors(errors) {
    if (!Array.isArray(errors)) {
        errors = [errors];
    }

    return (
        errors
            // Remove null/undefined items
            .filter((error) => !!error)
            // Extract an error message
            .map((error) => {
                // UI API read errors
                if (Array.isArray(error.body)) {
                    return error.body.map((e) => e.message);
                }
                // UI API DML, Apex and network errors
                else if (error.body && typeof error.body.message === 'string') {
                    return error.body.message;
                }
                // JS errors
                else if (typeof error.message === 'string') {
                    return error.message;
                }
                // Unknown error shape so try HTTP status text
                return error.statusText;
            })
            // Flatten
            .reduce((prev, curr) => prev.concat(curr), [])
            // Remove empty strings
            .filter((message) => !!message)
    );
}
<template>
    <div class="questions-container slds-m-around_x-small">
        <div if:true={isLoading} class="slds-grid slds-wrap">
            <lightning-spinner
                alternative-text="Loading"
                size="large"
            ></lightning-spinner>
        </div>
        <template if:true={errors}>{ errors }</template>
        <template if:true={questions}>
            <template for:each={questions} for:item="entry">
                <div key={entry.Prompt} class="question slds-p-bottom_x-small">
                    <p class="slds-m-bottom_xx-small">{ entry.Label }</p>
                    <div class="options">
                        <template for:each={entry.Options} for:item="option">
                            <p key={option.Value} class={option.Class}>
                                { option.Label }
                            </p>
                        </template>
                    </div>
                </div>
            </template>
        </template>
    </div>
</template>

Expected behavior Component using external lib should resolve the import automacally and should not throw compilation exception

Desktop (please complete the following information):

Additional context N/A