H5P-standalone logging xapi events with ReactJs?

Question

I'm implementing h5p's with reactjs, I'm able to play the h5p player, however i'm unable to view the events with the externalDispatcher.on("xAPI", (event)... command.

How can i log the event of a h5p in reactjs

Error message: Cannot read properties of undefined (reading 'on')

import { H5P } from "h5p-standalone";
import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    const el = document.getElementById("h5p-container");
    const options = {
      h5pJsonPath: "/h5p/pygame",
      frameJs: "/assets/frame.bundle.js",
      frameCss: "/assets/styles/h5p.css"
    };
    const needAsync = async () => {
      await new H5P(el, options).then((res) => {
        H5P.externalDispatcher.on("xAPI", (event) => {
          console.log(event);
        });
      });
    };
    needAsync();
  }, []);
  return <></>;
}

Error message

Answer 1

You are importing H5PStandalone as H5P, and that is not the H5P object that you are looking for when you want to listen to the events that are sent by H5P.

You'd need to import H5PStandalone with

import { H5P as H5PStandalone } from 'h5p-standalone';

and then accordingly instantiate with new H5PStandalone(el, options). That will allow you to access the genuine H5P object after H5PStandalone has been instantiated.

And a hint: You're mixing Promises and asynchronous calls. You should either use the former like

const needAsync = () => {
  new H5PStandalone(el, options).then(() => {
    H5P.externalDispatcher.on('xAPI', (event) => {
      console.log(event);
    });
  });
};

or the latter like

const needAsync = async () => {
  await new H5PStandalone(el, options);
 
  H5P.externalDispatcher.on('xAPI', (event) => {
    console.log(event);
  });
};

They both do the same. Technically, you also don't need to wrap them in a function but could run the code directly (App would need to be declared asynchronous if using the async/await syntax).