0

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?

Danh Dao
  • 11
  • 1

2 Answers2

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.

Oliver Tacke
  • 332
  • 4
  • 12
  • h5pJsonPath: "h5p-folder" -> that might be wrong? – Diego González Cruz Jan 04 '23 at 10:49
  • @DiegoGonzálezCruz If content was served in some other folder, then `h5pJsonPath` would need to point to that folder, sure. But given that the OP seems to be using the default configuration and most likely never got this running before in the first, it's unlikely that he/she wanted to use a different folder and just forgot to change the setting. – Oliver Tacke Jan 04 '23 at 16:35
-1

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.

ACoding
  • 1
  • 1