Search code examples
reactjsreact-nativeunity-game-engineunity-webgl

React unity WebGL not working on React JS project

Hey there trying to make my Unity WebGL export work on my React JS project but for some reason is not working I'm using the following React Unity WebGL version (react-unity-webgl@7.x # For Unity 2018 and 2019 (Active LTS)) and I have followed the instructions accordingly to the version I'm using, someone ran into the same issue than me and asked a question in the GitHub and I followed what they said which is basically to put the unity folder in the public folder but still is not working. Anyone has any idea of how to fix this ?

This is how I have my folder structure:

enter image description here

And this is the 2 codes I have try (which they are basically the same):

Code A:

import React from 'react'
import Unity, { UnityContent } from "react-unity-webgl";

let unityContent = new UnityContent(
  "Megaman/Build/Megaman.json",
  "Megaman/Build/UnityLoader.js"
);

function MegamanGame() {
    return (
        <div>
          <h1>Is not working</h1>
          <Unity unityContent={unityContent} />
        </div>
      
    )
}

export default MegamanGame

Code B:

import Unity, { UnityContent } from "react-unity-webgl";
export default function Megaman() {
    let unityContent = new UnityContent(
        "Megaman/Build/Megaman.json",
        "Megaman/Build/UnityLoader.js"
    );
    return (
        <div><Unity unityContent={unityContent} /></div>
    );
}

And this is how it renders

enter image description here

Take in mind I have try the path in 2 ways either "Megaman/Build/Megaman.json" or just "/Build/Megaman.json"

Solution

  • Answered here anyone looking: https://github.com/jeffreylanters/react-unity-webgl/discussions/299

    Code was fine just needed to add "/Megaman/Build/Megaman.json" and "/Megaman/Build/UnityLoader.js".

    And keep in mind the "UnityContent" has been reworked into "UnityContext" from version 7.x to 8.x.