h5p-автономный с ReactJS?

В настоящее время я пытаюсь реализовать пакет h5p-standalone с помощью ReactJS.

Ниже мой код

      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;

Но когда я запускаю и проверяю консоль браузера, она показывает:

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

Моя структура проекта

Есть ли какой-то шаг, который я сделал неправильно?

Источник

2 ответа

Сообщение об ошибке, скорее всего, намекает на страницу 404, отправленную вашим сервером, просто взгляните на вкладку вашей сети.

Я предполагаю, что вы не помещали контент H5P вh5p-folder, поэтому h5p-standalone не может найтиh5p.jsonфайл, в котором будет указано, какие ресурсы использовать.

Источник

если вы посмотрите на свои файлы h5p json, они содержат следующие элементы «<!DOCTYPE». (которые не являются json)

в вашем коде vs найдите <!DOCTYPE и в файлах json, которые его содержат, удалите или закомментируйте их.

вот как я решил это, так как я получил ту же ошибку.

Источник
Другие вопросы по тегам