Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Components using Vlocity Namespace can't be compiled #125

Closed
AllanOricil opened this issue Sep 1, 2021 · 0 comments
Closed

Components using Vlocity Namespace can't be compiled #125

AllanOricil opened this issue Sep 1, 2021 · 0 comments
Labels
type:feature New feature or request

Comments

@AllanOricil
Copy link

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):

  • OS: Windows 10
  • Browser Chrome
  • Version 92.0.4545.159

Additional context
N/A

@smaddox-sf smaddox-sf added the type:feature New feature or request label Sep 7, 2021
@AllanOricil AllanOricil closed this as not planned Won't fix, can't repro, duplicate, stale May 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type:feature New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants