TypeError: activePage.createVisual is not a function (Power BI JavaScript API)

Hi everyone,

I'm trying to dynamically add a visual to an embedded Power BI report using the createVisual() method as documented here:
🔗 Microsoft Docs: Create a visual in Power BI embedded

However, when I try to execute the following code:

try {
      const pages = await this.report.getPages();
      const activePage = pages.find(p  => p.isActive);
      if(!activePage)return;
      const visualLayout = {
        x: 0,
        y: 0,
        z: 0,
        width: 300,
        height: 300
      };
      const visualResponse = await activePage.createVisual('pieChart', visualLayout, false);
      const newVisual = visualResponse.visual;
      await newVisual.update({ title: "Count of RelatedParty by TaxJurisdiction" });

      console.log("✅ Visual created:", newVisual);

    } catch (error) {
      console.error("❌ Error creating visual:", error);
    }

I get this error:

TypeError: activePage.createVisual is not a function
at _PowerBiService.<anonymous> (power-bi-service.service.ts:151:47)
at Generator.next (<anonymous>)
at fulfilled (main.js:10:24)

What I’ve Checked So Far:

✅ My Power BI JavaScript API version is up to date (    "powerbi-client": "^2.23.1")

✅ The report is properly embedded and interactive
✅ getPages() works fine, meaning activePage is a valid object

Any insights or solutions would be really helpful! 🚀

Thanks in advance! 😊