LWC registerRefreshHandler method throwing error via new lightning/refresh module

Question

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.

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

Answer 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