h5p-standalone with ReactJS?

Question

I'm currently trying to implement package h5p-standalone with ReactJS

Below is my code

import { useEffect } from "react";
import "./App.css";
import { H5P } from "h5p-standalone";

function App() {
  useEffect(() => {
    const el = document.getElementById("h5p-container");

    const options = {
      h5pJsonPath: "h5p-folder",
      frameJs: "h5p-assets/frame.bundle.js",
      frameCss: "h5p-assets/styles/h5p.css",
    };

    const h5p = new H5P(el, options);

    h5p.then((res) => console.log(res)).catch((e) => console.log("Err: ", e));
  }, []);

  return <div id="h5p-container"></div>;
}

export default App;

But when I run and check browser console it shows:

Err: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

My project structure

Is there any step that I did wrong?

Answer 1

The error message is most likely hinting to a 404 page that your server sent, just have a look at your network tab.

I assume you did not put any H5P content into the h5p-folder, so h5p-standalone cannot find the h5p.json file that would tell what resources to use.

Answer 2

if you look at your h5p json files, they contain the following elements "<!DOCTYPE".(which are not json)

in your vs code search <!DOCTYPE, and in the json files that contain it delete or comment them out.

that's how i solved it, as i got the same error.