CMSImageWithTitle

[Maserick74]

Summary

Compontent throws error after mouseOver an selected Image. In scrachtOrga as well as in our dev Sandbox. Hope I've done nothing wrong...

Salesforce Org Type

Scratch Org

Steps To Reproduce

1. Insert component cmsImageWithTitle on LWR Site.
2. Add picture from CMS
3. Move mouse over picture
4. Error happens in edit as well as in preview mode

Current Behavior

1. Image is displayed
2. Error occurs on mouseOver
3. After reload, error still occurs but image isn't displayed

Expected Behavior

No response

Relevant Log Output

{"subject":"window error","message":"Cannot read properties of undefined (reading 'apply')","stack":"TypeError: Cannot read properties of undefined (reading 'apply')\n

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[github-actions[bot]]

Welcome! 👋

Thank you for posting this issue. 🙇🏼‍♂️ We will come back to you latest within the next 48h (working days). Stay tuned!

[muenzpraeger]

Does this happen with a component in this sample app, or a custom implementation?

[Maserick74]

happens also in scratch org in the sample app

[muenzpraeger]

@Maserick74 Got it. Thanks for sharing the screenshot, that explains what you see.

The cmsImageWithTitle component for this sample app is designed to be used within the ligthningRecordForm custom component (the one in the top-right of the shared screenshot), and not standalone.

Specifically the mouse over/out effects are used to invert the colors, and to show different images based on the specified CMS type.

This is what a simplified version of the used JavaScript class would have to look like if you want a standalone component that displays a single CMS item.

import { LightningElement, api, wire } from 'lwc';
import getContent from '@salesforce/apex/ManagedContentController.getContent';
import basePath from '@salesforce/community/basePath';
export default class CmsImageWithTitle extends LightningElement {
    @api contentId;
    @api title;

    @wire(getContent, {
        contentId: '$contentId',
        page: 0,
        pageSize: 1,
        language: 'en_US',
        filterby: ''
    })
    wiredContent({ data, error }) {
        if (data) {
            this._cmsData = data;
            this.altText = this._cmsData.altText.value;
            this.url = basePath + '/sfsites/c' + this._cmsData.source.url;
        }
        if (error) {
            console.log('Error: ' + JSON.stringify(error));
        }
    }

    altText;
    url;

    _cmsData;

    handleClick(e) {
        // do something on click
    }

    get wrapperCss() {
        return this.action !== undefined
            ? `slds-grid slds-text-align_center slds-wrap action`
            : 'slds-grid slds-text-align_center slds-wrap';
    }
}

Hope that helps.

[Maserick74]

@muenzpraeger - wow, how cool is that!! Helps yeah! Amazing!