Configuration Problem

[zalven]

I have a file called like this.

How do I implement them inside react? I'm having a hard time figuring that out.

[jeffreylanters]

Hi! The Test Repository might help you out.

[rvrjp7]

@zalven, did you find any solution for this? I'm facing the same issue.

[zalven]

@rvrjp7 @jeffreylanters Not yet, I'm solving it today. It's kinda foggy to me when I read the test repository because we don't have the same file type like mine where there's ".unitywebfile". Like should I rename those?
At first, I'm testing the build player settings from unity. Sadly it didn't work T-T

[rvrjp7]

@zalven, which Unity version you are using? 2019 or 2020?

[zalven]

I'm using 2019 btw. Please message or email me if you already solved it and I'll do the same. Thank you!

[rvrjp7]

As mentioned in the Homepage, use npm install react-unity-webgl@7.x for Unity 2018 and 2019 (LTS) ,
and use following code to render unity game :

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

[VegetableThins]

As mentioned in the Homepage, use npm install react-unity-webgl@7.x for Unity 2018 and 2019 (LTS) ,
and use following code to render unity game :

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

As mentioned in the Homepage, use npm install react-unity-webgl@7.x for Unity 2018 and 2019 (LTS) ,
and use following code to render unity game :

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

This worked for me! also helped to know that the build path was relative to your index.html . Thanks a lot you saved me!

[dharry1968]

Hi, iv'e been trying to get this to work, using Unity 2019.4.x so have installed @7.x but I keep getting an error I don't understand. My folder/file structure is:

and my index.js is:

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

export default function App() {
let unityContent = new UnityContent(
"Build/Web.json",
"Build/UnityLoader.js"
);
return (

);
}

But it is telling me: http://dg.darkgalaxies.io:3000/Build/UnityLoader.js 404 (Not Found)

I have tried the path with ./Build and ../Build but still nothing. I am using Babel and Next, not sure if that makes a difference?

Any pointers you can help me with?

Thanks
Dean

[jeffreylanters]

Hi Dean, your Unity build should not be in your source directory. When building your React app, see where it's being distributed to. This is the directory where your Unity build's path is relative from.

[dharry1968]

Thanks Jeffrey, I worked it out now, thanks for the help 👍

[SeanGephardt1]

As mentioned in the Homepage, use npm install react-unity-webgl@7.x for Unity 2018 and 2019 (LTS) ,
and use following code to render unity game :

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

As mentioned in the Homepage, use npm install react-unity-webgl@7.x for Unity 2018 and 2019 (LTS) ,
and use following code to render unity game :

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

This worked for me! also helped to know that the build path was relative to your index.html . Thanks a lot you saved me!

The home page states "UnityContext" instead of "UnityContent". Making this change to "UnityContent" got my Unity WebGL build working in a React app.

[jeffreylanters]

Hi @SeanGephardt1. The "UnityContent" has been reworked into "UnityContext" from version 7.x to 8.x. You can utilise the current readme for 8.x documentation, or head over to the legacy documentation for 7.x if you're getting lost. Best of luck with your project! If you need any help, feel free to open a new discussion.

[SeanGephardt1]

Hi @SeanGephardt1. The "UnityContent" has been reworked into "UnityContext" from version 7.x to 8.x. You can utilise the current readme for 8.x documentation, or head over to the legacy documentation for 7.x if you're getting lost. Best of luck with your project! If you need any help, feel free to open a new discussion.

Thanks!

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[github-actions]

This issue was closed because it has been inactive for 30 days since being marked as stale.

[N7Pankake]

Hi @SeanGephardt1. The "UnityContent" has been reworked into "UnityContext" from version 7.x to 8.x. You can utilise the current readme for 8.x documentation, or head over to the legacy documentation for 7.x if you're getting lost. Best of luck with your project! If you need any help, feel free to open a new discussion.

Thanks!

The legacy documentation no longer exist it says 404 error, also I'm having the same issue and I can't understand why it doesn't work because I have it on my public folder.

This is how I have my folder structure

And this is what I have in my JS file where I'm trying to render the Unity project

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><Unity unityContent={unityContent} /></div>
      
    )
}

export default MegamanGame

[jeffreylanters]

@N7Pankake The legacy documentation moved to the readme under the 7.x tag. You should be able to find it there.

Looking at your screenshot, your structure and React code looks just fine. Are you getting any errors in the console?

[N7Pankake]

Oh wow how could I forget to check my console ...

[jeffreylanters]

Moved to #299