3

This page has an error. You might just need to refresh it. Error during LWC component connect phase: [Maximum call stack size exceeded] Failing descriptor: {markup://c:dcInfographic}

import { LightningElement, api } from 'lwc';
import INFOGRAPHICS from '@salesforce/resourceUrl/Infographics';

export default class DcInfographic extends LightningElement {
    @api imgFileName;
    @api alternativeText;

    folderPath = INFOGRAPHICS;

    get imgFilePath() {
        return `${this.folderPath}/${this.imgFileName}`;
    }

    get alternativeText() {
        return this.alternativeText;
    }
}

<template>
<div class="xeg-content-container">
    <figure role="infographic">
        <img src={imgFilePath} alt={alternativeText}>
        <figcaption>{alternativeText}</figcaption>
    </figure>
</div>
</template>

I'm open to suggestions on how to improve this or what the problem might be.

1 Answer 1

7

Likely to be this:

@api alternativeText;

get alternativeText() {
    return this.alternativeText;
}

where this.alternativeText inside the get method is causing the get method itself to be called again rather than referencing the same name property alternativeText resulting in a never ending call loop eventually terminated by built in "this is crazy" checking.

The standard pattern for this is AFAIK to use a different name for the property:

_alternativeText

@api
set alternativeText(value) {
    this._alternativeText = value;
    .... extra logic goes here
}

get alternativeText() {
    return this._alternativeText;
}

where the property has a different name (with the _ prefix being a common convention for properties that should be regarded as private). But rather verbose and ugly IMHO.

Or in your case, just delete this:

get alternativeText() {
    return this.alternativeText;
}

as it adds nothing but causes the problem.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .