Unable to render Unity webgl app inside App.js

[snh3003]

I'm simply trying to implement a small unity built WebGL inside my react app. On following the documentation, I wrote the code like this (Build1 is the name of the unity app and it's kept inside the public folder as per the documentation.

import './App.css';
import Unity, { UnityContext } from "react-unity-webgl";

const unityContext = new UnityContext({
  loaderUrl: "Build1/Build/UnityLoader.js",
  dataUrl: "Build1/Build/Builds.json",
  frameworkUrl: "Build1/Build/Builds.wasm.framework.unityweb",
  codeUrl: "Build1/Build/Builds.wasm.code.unityweb",
});

function App() {
  return (
    <div className="App">
      <Unity unityContext = {unityContext} />
    </div>
  );
}

export default App;

But still, the unity app is not shown that too without any errors.
Can someone help me out with this?

Here is the repo link

[jeffreylanters]

Hi. It's hard to determine what going wrong here. The link to your repository is not working (probably private). Could you send me more information?

[snh3003]

The repository is public, can you check now?

[Uzair5162]

Looking at your repo, you are using Unity version 2019 and react-unity-webgl version 8. Try reinstalling the package with
npm install [email protected], which should give you the correct package version for your unity build.

See https://github.com/jeffreylanters/react-unity-webgl#installation for the full list of package versions for each unity version.

[kevin-guertin]

If the above solution doesn't work, try changing your paths to:

const unityContext = new UnityContext({
    loaderUrl: "./Build1/Build/UnityLoader.js",
    dataUrl: "./Build1/Build/Builds.json",
    frameworkUrl: "./Build1/Build/Builds.wasm.framework.unityweb",
    codeUrl: "./Build1/Build/Builds.wasm.code.unityweb",
});

At least, this is how I have mine configured.