Event handlers are not getting called when using React.StrictMode on React 18.0.2

Packages used:

powerbi-client: 2.21.1 powerbi-client-react: 1.3.5 react: 18.2.0 react-dom: 18.2.0

Problem description

After updating from React 17 to React 18, I noticed that event handlers were not getting called. I proceeded to remove <React.StrictMode>, and everything worked as expected.

Steps to reproduce

      <PowerBIEmbed
        embedConfig={{
          type: "report",
          tokenType: TokenType.Aad,
          settings: {
            personalBookmarksEnabled: true,
            background: BackgroundType.Transparent,
            panes: {
              filters: {
                visible: false,
              },
              pageNavigation: {
                visible: false,
              },
            },
          },
          accessToken: "<token>",
          embedUrl: "<embedUrl>",
        }}
        eventHandlers={new Map([
          ["loaded", () => {console.log("Report loaded")}],
        ])
      }
      />

Expected result: “Report Loaded” get’s printed in the console. Actual result: Report renders correctly, but nothing is logged in the console.

[unowiz]

I came across the same issue. Upgraded to React 18 and event handlers didn’t fire at all. I should have googled before. thanks @BrianUribe6 for logging this.

[ericwilhite]

I just ran into the same issue.

I’ve been playing with the component and found this solution that seems to work with React v18 and StrictMode.

It grabs the embedded component instance and uses the “.on” method for the component to add the handler. I also did the cleanup manually with the “.off” in the return of the useEffect as I’m not sure if it automatically cleans up the handlers.

import { PowerBIEmbed } from "powerbi-client-react";
import { models, Report } from "powerbi-client";

export const PowerBIReport = () => {

  const [embeddedReport, setEmbeddedReport] = useState<Report>();

  useEffect(() => {
    embeddedReport?.on("loaded", (event) => {
      console.log("loaded");
    });

    embeddedReport?.on("saved", (event) => {
      console.log("saved", event);
    });
    return () => {
      embeddedReport?.off("loaded");
      embeddedReport?.off("saved");
    };
  }, [embeddedReport]);

  return (
    <div className="h-screen">
      <PowerBIEmbed
        embedConfig={{
          type: "report",
          id: "",
          embedUrl: "",
          accessToken: "",
          tokenType: models.TokenType.Embed,
          permissions: models.Permissions.All,
          viewMode: models.ViewMode.Edit,
          settings: {
            bars: {
              actionBar: { visible: true },
            },
            panes: {
              filters: { expanded: false, visible: true },
            },
            background: models.BackgroundType.Default,
          },
        }}

        getEmbeddedComponent={(r) => {
          setEmbeddedReport(r as Report);
        }}
      />
    </div>
  );
};