React Typescipt build error

[EgeKaanGurkan]

Hey,
First off, thanks for you guys' amazing work!

I have successfully integrated your libraries and got desired behaviour on my local machine and I can run it with no problem with npm start. But when I build the frontend with npm run build (which just runs react-scripts build) and serve it with serve -s build for a production build that I can deploy with Docker on Kubernetes, I get errors like the following in the Chrome console:

• When I try to load the Editor component from @lumieducation/h5p-react:

Uncaught (in promise) ReferenceError: H5PEditor is not defined

• When I try to load the Player component from the same library:

TypeError: window.H5P.init is not a function

The errors are thrown from h5p-editor.ts:390 and h5p-player.ts:423 respectively.

Also, while taking the build, I get errors like:

Failed to parse source map from '/Users/.../.../h5p/h5p-frontend/node_modules/@lumieducation/h5p-react/src/H5PEditorUI.tsx' file: Error: ENOENT: no such file or directory, open '/Users/.../.../h5p/h5p-frontend/node_modules/@lumieducation/h5p-react/src/H5PEditorUI.tsx'

and when I look inside my node_modules folder, the file structure really does not match where the Typescript compiler is trying to look at. I am not well versed in compiling for a production build, so some guidance would be amazing.

If it helps, here is my tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "sourceMap": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

[sr258]

You don't need to worry about the source map. It's only a warning and not a blocking error. We probably should include the ts(x) files in the package. So the problem lies not with the TypeScript build I think.

It more looks like the core h5p files (the JavaScript provided by Joubel) is not loaded properly. Both of you error messages are about the H5P core not being loaded. The H5P core is loaded from the files referenced in the IEditorModel and IPlayerModel scripts and styles properties. The model is retreived in loadContentCallback from the server. Please check whether this callback returns the proper data. If you run everything with npm start you get a proxy that proxies the traffic to the REST backend in the frontend web app. You might not have this proxy in your production setup.

[wasimshigri]

I am having same issue. I modified the sample sever-project with the sample frontend project and its working fine. Now I am trying to move the frontend part into my main react.js app which is in js. Its giving me same error as explained above by [EgeKaanGurkan]

[sr258]

@wasimshigri Did you check what I wrote my answer from 13th April? I believe the cause is that the core JS files are not loaded properly. The sample project serves the core H5P files from the server and there's a proxy passthrough in the client. If you integrate the frontend into a different app, it is likely that you don't have the proxy there.