Lightning Messaging Service Subscriber is not receiving messages from Publisher - salesforce

Question

Despite numerous tutorials I cannot get a simple LMS example to work that is virtually cut and paste from samples. I have created an extremely simple pair of LWCs, one that publishes a hard coded value at the click of a button and a second that simply logs/displays the message that was sent. It compiles and deploys without error and console log reports that the value is published and that the subscriber is subscribed, but the message handler in the subscriber is never called. What the heck am I missing?
Here is my code:
PUBLISHER LWC:
testPub.html
<template>
<lightning-button onclick={handlePubClick} variant="brand" label="Test Publish" title="Primary action" class="slds-var-m-left_x-small"></lightning-button>
</template>
testPub.js
import { LightningElement, wire} from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
import XingoFiltersMC from '#salesforce/messageChannel/XingoFilters__c';
export default class TestPub extends LightningElement {
#wire(MessageContext)
messageContext;
handlePubClick(){
const message = {fu: 'bar'};
console.log('publishing ' + JSON.stringify(message));
publish(this.MessageContext,XingoFiltersMC, message)
}
}
testPub.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
SUBSCRIBER LWC:
testSub.html
<template>
Received: {msg}
</template>
testSub.js
import { LightningElement, wire } from 'lwc';
import {subscribe, MessageContext} from 'lightning/messageService';
import XingoFiltersMC from '#salesforce/messageChannel/XingoFilters__c';
export default class TestSub extends LightningElement {
#wire(MessageContext)
messageContext;
msg = "";
subscription = null;
subscribeToMessageChannel() {
console.log("subscribing");
this.subscription = subscribe(
this.messageContext,
XingoFiltersMC,
(message) => this.handleMessage(message)
);
}
handleMessage(message) { //<-- this here never is reached
this.msg = message ? JSON.stringify(message, null, "\t") : "no message payload";
console.log("received " + this.msg);
}
connectedCallback() {
this.subscribeToMessageChannel();
}
}
testSub.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
MESSAGE CHANNEL:
force-app\main\default\messageChannels\XingoFilters.messageChannel-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
<masterLabel>XingoFilters</masterLabel>
<isExposed>true</isExposed>
<description>Xingo message channel for filter change.</description>
</LightningMessageChannel>
I'm using sfdx force:source:push --json --loglevel debug -f in VisualCode to push to my org where I have a Lightning App with these two components on it.
Any help greatly appreciated, I feel like I have exhausted the tutorials and docs out there which all looks consistent with this test that isn't working for me.

Answer 1

The root cause was:
publish(this.MessageContext,XingoFiltersMC, message)
should have been
publish(this.messageContext,XingoFiltersMC, message)
Over a day lost to this capitalization typo... any idea on how to configure VS Code catch these sorts of typos better?