1

I am trying to implement the new lightning/refresh module into one of my LWC's, but am finding that I get a component error anytime I try to load my Salesforce instance after deploying.

Invalid contextElement. Must be an HTMLElement or LightningElement.

Invalid contextElement. Must be an HTMLElement or LightningElement.

The only thing to note is that this LWC extends another LWC of mine (messageServiceElement), but that LWC extends both the NavigationMixin and LightningElement.

import { wire, LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { publish, subscribe, unsubscribe, MessageContext } from 'lightning/messageService';

export default class MessageServiceHandler extends NavigationMixin(LightningElement) {
    // Message service code goes here
}
import messageServiceElement from 'c/messageServiceHandler';
import { refreshApex } from '@salesforce/apex';
import {
    registerRefreshHandler,
    unregisterRefreshHandler
} from 'lightning/refresh';

export default class patientRelatedList extends messageServiceElement {
    // other variables exist here
    @api recordId;
    refreshHandlerID;
    treatmentReportData;

    connectedCallback() {
        this.refreshHandlerID = registerRefreshHandler(
            this,
            this.refreshHandler
        );
    }

    disconnectedCallback() {
        unregisterRefreshHandler(this.refreshHandlerID);
    }

    refreshHandler() {
        refreshApex(this.treatmentReportData);
    }

    @wire(getRelatedListRecords, {
        parentRecordId: '$recordId',
        relatedListId: 'Treatment_Reports__r',
        fields: [
            // Fields exist here
        ]
    })
    listInfo(result) {
        this.treatmentReportData = result;
        if (result.error) {
            // Logic goes here
        } else if (result.data) {
            // Logic goes here
        }

I know this is a new module, but just wanted to see if anyone could help me while there isn't much documentation provided.

On a side note... Ultimately, I am trying to refresh this component from an Aura component. The Aura itself is a button that is placed on a flow screen. Once clicked, it will close the current tab (via WorkspaceAPI) and then publish a message via LMS. This message is then picked up by my LWC and some logic will then process.

What I'm finding is that using $A.get('e.force:refreshView').fire(); in the Aura component will not work at all. This was working in a previous implementation of these components, but after refactoring slightly due to a bug, it is no longer working to refresh my LWC.

I have also tried eval("$A.get('e.force:refreshView').fire();") in my LWC after the message had been received, but this also doesn't work.

The LWC will only update after a browser refresh.

<aura:component implements="lightning:availableForFlowScreens" >
    <lightning:workspaceAPI aura:id="workspace"/>
    <lightning:messageChannel type="channel__c" aura:id="channel" scope="APPLICATION" />
    <c:constants aura:id="constants"></c:constants>
    
    <div class="slds-clearfix slds-p-top_medium">
        <div class="slds-float_right">
            <lightning:button variant="brand" label="Save as Complete" onclick="{!c.handleClick}" class="slds-button slds-button_brand"/>
        </div>
    </div>
</aura:component>
({
    handleClick: function (component) {
        var workspaceAPI = component.find('workspace');
        var constants = component.find('constants').getConstants();

        workspaceAPI
            .getFocusedTabInfo()
            .then(function (response) {
                var focusedTabId = response.tabId;

                var message = {
                    messageContext: constants.PATIENT_COMPLETED,
                    payload: response
                };
                component.find('channel').publish(message);

                // Close the tab based on the focused tab id
                workspaceAPI.closeTab({
                    tabId: focusedTabId
                });
                
                var navigate = component.get("v.navigateFlow");
                navigate("NEXT");

                $A.get('e.force:refreshView').fire();
            })
            .catch(function (error) {
                console.error(error);
            })
    }
});

Please note: Because there is no flow screen at the very end of the flow, this button is placed on the last possible screen I can possibly place it on. After this screen, there are a few assignment elements and an update element (which is the last element of the flow). I have to force the flow to the end by using the navigate "NEXT" method.

I see there is a similar question via this post, but for some reason I am getting the component error which I stated at the start of this post. If I can figure this out, then I may be one step closer (until I can figure out how to dispatch the refresh event via Aura): Trying to use Spring '23 RefreshView API from an Aura component to refresh wire data in LWC

2
  • Given the description of what's going on, it sounds like there's a bug somewhere. Taking you at your word, that messageServiceElement does indeed extend LightningElement, it sounds like there may be a bug. As this is a beta feature, it's not entirely surprising. I'll see if I can reproduce it and get a ticket to someone, but you should do the same, if you have access to Dev Support, Partner Support, or some other support that can actually look into this.
    – sfdcfox
    Commented May 22, 2023 at 3:23
  • Hi @sfdxfox, I have added the messageServiceElement class to my code to show how it extends LightningElement. I will see if I can get support for this too. Thanks for the reply!
    – jackb
    Commented May 22, 2023 at 20:24

2 Answers 2

3

Per SF documentation, there are different methods of registering your listener based upon the Lightning Web security settings (LWS vs Lightning Locker). see: https://developer.salesforce.com/docs/platform/lwc/guide/data-refreshview-api.html

Presuming Lightning Locker is enabled, your register call should look like this:

this.refreshHandlerID = registerRefreshHandler( this.template.host, this.refreshHandler.bind(this));

Alternatively, you can change your Lightning Web security setting as mentioned above.

1

I was troubled by the same issue and came across this query of yours. Finally checking this box worked for me:

Settings -> Session Settings -> Use Lightning Web Security for Lightning web components and Aura components

You must log in to answer this question.

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