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

[BrianUribe6]

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

, and everything worked as expected. **Steps to reproduce** ``` ", 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.

[gchehab]

I am having the same issue, apparently, the report object does never add the eventHandlers prop to its instance configuration. Removing react strict mode helped, however, it seems to be a bad idea.

[BrianUribe6]

I am having the same issue, apparently, the report object does never add the eventHandlers prop to its instance configuration. Removing react strict mode helped, however, it seems to be a bad idea.

This project is not being maintained. I'd recommend spending some time creating your own wrapper, or downgrading to react 17. Disabling StrictMode is not a solution...

[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.

[spiftire]

I also encountered this problem. Why is this project not being maintained?

[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>
  );
};

[bastienmenis]

@ericwilhite Thank you for sharing your workaround. That saved us a lot of time!

[ChallengeHandler]

I'm now facing same issue on React v18. I tried to run the demo project inside the library and it does not logging any message from eventHandlers. I wonder if there's any plan for the next release for maintenance.

[Kalevins]

I have the same issue

[KotanaSai21]

We have taken this issue into consideration. We will be looking into the resolution and plan to fix the issue in the next release. Thank you for your patience.

[darshansan]

Looking forward to the fix, Ran into same issue.

[ChallengeHandler]

Right now we can try this approach.

Instead of using eventhandlers prop, I tried to get report instance by using getEmbeddedComponent prop and add event handlers for that instance.

import { FC, useRef } from 'react';
import { PowerBIEmbed } from 'powerbi-client-react';
import { models, Embed, Report, Page } from 'powerbi-client';

const sampleReportUrl = 'https://playgroundbe-bck-1.azurewebsites.net/Reports/SampleReport';

type PowerBiProps = {};
const PowerBi: FC<PowerBiProps> = () => {
  const embedRef = useRef<Report | undefined>(undefined);
  const [sampleReportConfig, setReportConfig] = useState<models.IReportEmbedConfiguration>({
    type: 'report',
    embedUrl: [EmbedUrl],
    tokenType: models.TokenType.Embed,
    accessToken: [AccessToken],
    settings: [Settings],
  });
  useEffect(() => {
    // Set event handler for the instance
    embedRef?.current?.on('dataSelected', async (event: any) => {
      console.log('data selected', event?.detail?.dataPoints);
    });
  }, []);

  return <div>
    <h1>Get events from Power BI Embed</h1>
    <PowerBIEmbed
      embedConfig={sampleReportConfig}
      getEmbeddedComponent={(embededComponent: Embed) => {
        // Add report instance to ref
        embedRef.current = embededComponent as Report;
      }}
    />
  </div>
}

I used react@18.2.0, and powerbi-client-react@1.3.5 for this approach.

[KotanaSai21]

Thank you for your patience. This issue has been fixed with new patch release and eventHandlers are now firing in React 18 Strict mode.

Please Upgrade your package version "powerbi-client-react": "^1.4.0"

Feel free to reach out if you have any other queries.