UnityContext not working for unity 2019 version

[silkflo]

Please avoid duplicates

• I checked all open issues and discussions and none of them matched my problem.

Language and Compiler

Babel and WebPack JavaScript

What environment are you using?

Local Development Server

When does your problem occur?

While writing code

What does your problem relate to?

The problem seems React related

React-Unity-WebGL Version

7.x

React Version

17.0.2

Unity Version

2019.1.5f1

What happened?

{UnityContext} doesn't seems to exist when I install React-Unity-WebGL Version 7.x.
It seems to be {UnityContent} instead.
But I have the following error :
Uncaught TypeError: UnityContent1 is not a constructor or
TypeError: UnityContext1 is not a constructor using UnityContext

My component script:

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

const ETA_Body = () => {
    const UnityContent = new UnityContent({
        loaderUrl: "unity/Eat Them all/build/UnityLoader.js",
        dataUrl: "unity/Eat Them all/build/Eat Them all.data.unityweb",
        frameworkUrl: "unity/Eat Them all/build/Eat Them all.wasm.framework.unityweb",
        codeUrl: "unity/Eat Them all/build/Eat Them all.wasm.code.unityweb",
      });

    return (
        <div className="ui segment">
           <Unity UnityContent={UnityContent} />
        </div>
    )
}

export default ETA_Body

my webGl folder is located in the public directory public/unity/Eat Them all/build

Error screenshot

Thank you for you help.

Reproducible test case

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

const ETA_Body = () => {
    const UnityContext  = new UnityContext  ({
        loaderUrl: "unity/Eat Them all/build/UnityLoader.js",
        dataUrl: "unity/Eat Them all/build/Eat Them all.data.unityweb",
        frameworkUrl: "unity/Eat Them all/build/Eat Them all.wasm.framework.unityweb",
        codeUrl: "unity/Eat Them all/build/Eat Them all.wasm.code.unityweb",
      });

    return (
        <div className="ui segment">
           <Unity UnityContext  ={UnityContext  } />
        </div>
    )
}

export default ETA_Body

Would you be interested in contributing a fix?

• yes, I would like to contribute a fix

[MomasVII]

Does anyone have a fix for this?

[silkflo]

I found the fix, it's working so good ❤️

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

export class ETA_Body extends React.Component {
  constructor(props) {
    super(props)

    this.unityContent = new UnityContent(
      "unity/Eat Them all/build/Eat Them all.json",
      "unity/Eat Them all/build/UnityLoader.js"
    )
  }

  render() {
    return (
      <div style={{ maxWidth: `700px`, maxHeight: `400px`, marginBottom: `1.45rem` }}>
        <Unity unityContent={this.unityContent} />
      </div>
    )
  }
}

export default ETA_Body

Thank's Jeffrey for this awesome package.