About:blank is rendered inside the div

[jmaguirrei]

Hello, I am trying the library with React and the h5p-test file provided in this repository.

I am getting a result, but is blank.

My code (a wrapper around React, but in the end is just React) look like:

export default client => {

  const divId = 'h5p-container';
  const h5pJsonFolder = 'https://some-remote-storage';

  const options = {
    h5pJsonPath: `${h5pJsonFolder}/h5p-test`,
    // h5pJsonPath: `${h5pJsonFolder}/video-1-fisiologia-capilar`,
    frameJs: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/main.bundle.min.js',
    frameCss: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/h5p.min.css',
    fullScreen: true,
  };

  return client.Component({

    inState() {
      return {
        H5P: null,
        player: null,
      };
    },

    didMount(props, store) {
      async function startComponent() {
        const { H5P } = store.getInState();
        if (!H5P) {
          const { H5P: H5PStandalone } = await import('h5p-standalone');
          const element = document.getElementById(divId);
          console.log('🚀 > element:', element);
          const player = await new H5PStandalone(element, options);
          store.setInState({
            H5P: H5PStandalone,
            player,
          });
        }
      }
      setTimeout(() => startComponent(), 5000);
    },

    render({ props, inState, css }) {

      const {
        H5P,
        player,
      } = inState;

      console.log('🚀 > H5P:', H5P);
      console.log('🚀 > player:', player);


      return (
        <div id={divId}>
        </div>
      );


    },

  });
};

I also tried making h5pJsonFolder a local one, but same result.
Console are not showing errors.

Thanks

[0xMurage]

It’s difficult to understand what’s going on without a demo. Could you share a demo repository to help reproduce the issue?