slicer.setSlicerState not working and got "TypeError: slicer.setSlicerState is not a function"

I tried using the slicer.setSlicerState PowerBI JS function and got error "TypeError: slicer.setSlicerState is not a function".  I tried this in the in App Owns Data sample , which is a ASP.Net MVC .  The following is the function I used.  The slicer visual is found but slicer.setSlicerState will generate error.  I have no issues  on only applying page level filters by using  activePage.setFilters([filter]), in which filter is same.  Any suggestion? Thanks!

function ApplySlicer() {
const filter = {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "Client_Market",
column: "Customer_Market_Name"
},
operator: "In",
values: ["Idaho Market"],
};

// Get a reference to the embedded report HTML element
var embedContainer = $('#reportContainer')[0];

// Get a reference to the embedded report.
var report = powerbi.get(embedContainer);

// Retrieve the page collection and get the visuals for the first page.
report.getPages()
.then(function (pages) {
// Retrieve active page.
var activePage = pages.filter(function (page) {
return page.isActive;
})[0];

activePage.getVisuals()
.then(function (visuals) {
// Retrieve the wanted visual.
var slicer = visuals.filter(function (visual) {
console.log("sliler is founcd")
return visual.type == "slicer" && visual.name == "c5003ae82a250a09e010";
})[0];

// Set the slicer state which contains the slicer filters.
slicer.setSlicerState({ filters: [filter] })
.then(function () {
console.log("Market slicer was set.");
})
.catch(function (errors) {
console.log(errors);
});
})
.catch(function (errors) {
console.log(errors);
});
})
.catch(function (errors) {
console.log(errors);
})

}