Cannot read properties of null (reading 'getBoundingClientRect')

[ShawnCentra]

Version:
"react-unity-webgl": "^9.0.3"

Unity 2021

Page -> open modal -> load unity component

       <FullScreenModal
              modalId={"react-unity-webgl-canvas-1"}
              show={show}
              setShow={() => setShow()}
              ProductObjectThreeDimensional={
                <WebGLRenderer
                  loader={`/unity/awningModel/Build/awningModel.loader.js`}
                  data={`/unity/awningModel/Build/awningModel.data`}
                  app={`/unity/awningModel/Build/awningModel.framework.js`}
                  wasm={`/unity/awningModel/Build/awningModel.wasm`}
                />
              }
            />

Unity Component

import React from "react";
import { Unity, useUnityContext } from "react-unity-webgl";
import styles from "./WebGLRenderer.module.scss";
import cn from "classnames";
import { Fragment } from "react";

const WebGLRenderer = ({ ...props }) => {
  const { unityProvider, isLoaded, loadingProgression } = useUnityContext({
    loaderUrl: props.loader,
    dataUrl: props.data,
    frameworkUrl: props.app,
    codeUrl: props.wasm,
  });

  // We'll round the loading progression to a whole number to represent the
  // percentage of the Unity Application that has loaded.
  const loadingPercentage = Math.round(loadingProgression * 100);

  return (
    <Fragment>
      <div className={cn(styles.wrapper)}>
        <div className={cn(styles.unityContainer)}>
          {/* loading screen */}
          {isLoaded === false && (
            <div className={styles.loadingOverlay}>
              <div className={styles.progressBar}>
                <div
                  className={styles.progressBarFill}
                  style={{ width: loadingProgression * 100 + "%" }}
                />
                   <p className={cn(styles.loadingText)}>Loading... ({loadingPercentage}%)</p>
              </div>
            </div>
          )}
          {/* The Unity app will be rendered here. */}
          <Unity
            className={
              cn(styles.unityCanvas)
            }
            unityProvider={unityProvider}
          />
        </div>
      </div>
    </Fragment>
  );
};

export default WebGLRenderer;

[ShawnCentra]

I think its due to an unmounting issue when the modal closes.
When the modal closes the canvas gets removed but the engine still looks for a reference.
I know in earlier versions I was able to call .QuitInstance
but it seems in the newer version this doesnt exist.

Anyone have any ideas on how to proceed?

[louis1999]

Isn't that now unload() ? I just tried it and that doesn't seem to work neither

[ShawnCentra]

Looks like that should work theoretically maybe @jeffreylanters could chime in?

[jeffreylanters]

Hi. Correct, this was still missing for the new documentation. I've just updated the 9.x website and added the documentation for unloading.

https://react-unity-webgl.dev/docs/api/unload

[jeffreylanters]

I've ran a quick test, it should work. The unload button in the GIF simply invokes the unload method from the Unity Context. Make sure you're adding the right elements to your dependency array in order to have a fresh reference to the correct Unity Instance.

This GIF is made with the Testing package in this repository, you could try it for yourself to see if you're missing something. Keep me posted!

[louis1999]

Thank for your answer I think my problem is that I didn't execute it at the right time. I want to execute it when I leave the page and I don't know if there is a way to do so use react

Has anyone a solution to unload just before changing page ?

[ShawnCentra]

I think reverting to v8.8.0 of react-unity-webgl and loading in Unity 2019 might be the way to go as its better supported.

[louis1999]

Isn't there any other option that downgrading unity version ?

[ShawnCentra]

Nope afaik this is the only way. Until unity gets a fix going for it but it seems like its not a priority for them since older v works fine for now.

[ShawnCentra]

I fixed this issue.

"react-unity-webgl": "8.8.0"
Unity 2021

Component

import React, { useState, useEffect } from "react";
import Unity, { UnityContext } from "react-unity-webgl";
import styles from "./WebGLRenderer.module.scss";
import cn from "classnames";
import { Fragment } from "react";
// make sure to install 8.8.0 version of react-unity-webgl before importing this
const WebGLRenderer= ({ ...props }) => {
  // This is the context that Unity will use to communicate with the React app.
  const unityContext = new UnityContext({
    productName: "React Unity WebGL Tests",
    companyName: "Jeffrey Lanters",
    // The url's of the Unity WebGL runtime, these paths are public and should be
    // accessible from the internet and relative to the index.html.
    loaderUrl: props.loader,
    dataUrl: props.data,
    frameworkUrl: props.app,
    codeUrl: props.wasm,
  });

  const [isUnityMounted, setIsUnityMounted] = useState(true);
  const [isLoaded, setIsLoaded] = useState(false);
  const [progression, setProgression] = useState(0);

  // Built-in event invoked when the Unity app is loaded.
  function handleOnUnityLoaded() {
    setIsLoaded(true);
  }

    // Event invoked when the user clicks the button, the unity container will be
  // mounted or unmounted depending on the current mounting state.
  function handleOnClickUnMountUnity() {
    if (isLoaded === true) {
      setIsLoaded(false);
    }
    setIsUnityMounted(isUnityMounted === false);
  }
  // When the component is mounted, we'll register some event listener.
  useEffect(() => {
    unityContext.on("loaded", handleOnUnityLoaded);
    // When the component is unmounted, we'll unregister the event listener.
    return function () {
      unityContext.removeAllEventListeners();
      unityContext.quitUnityInstance();
    };
  }, [props.show]);
  // We'll round the loading progression to a whole number to represent the
  // percentage of the Unity Application that has loaded.
  const loadingPercentage = Math.round(progression * 100);

  return (
    <Fragment>
      <div className={cn(styles.wrapper)}>
        <div className={cn(styles.unityContainer)}>
          {/* loading screen */}
          {isLoaded === false && (
            <div className={styles.loadingOverlay}>
              <div className={styles.progressBar}>
                <div
                  className={styles.progressBarFill}
                  style={{ width: progression * 100 + "%" }}
                />
                <p className={cn(styles.loadingText)}>
                  Loading... ({loadingPercentage}%)
                </p>
              </div>
            </div>
          )}
          {/* The Unity app will be rendered here. */}
          <Unity
            className={cn(styles.unityCanvas)}
            unityContext={unityContext}
          />
        </div>
      </div>
    </Fragment>
  );
};

export default WebGLRenderer;

parent component page

import dynamic from "next/dynamic";
const UnityComponent = dynamic(
  () => import("../../components/WebGLRenderer2019"),
  {
    ssr: false,
  }
);
//opens modal then starts unity engine 
          <FullScreenModal
              modalId={"react-unity-webgl-canvas-1"}
              show={show}
              setShow={() => setShow()}
              ProductObjectThreeDimensional={
                <UnityComponent
                  show={show}
                  loader={`/unity/awningModel/Build/awningModel.loader.js`}
                  data={`/unity/awningModel/Build/awningModel.data`}
                  app={`/unity/awningModel/Build/awningModel.framework.js`}
                  wasm={`/unity/awningModel/Build/awningModel.wasm`}
                />
              }
            />

[jack-szeto]

I fixed this issue.

"react-unity-webgl": "8.8.0" Unity 2021

Component

import React, { useState, useEffect } from "react";
import Unity, { UnityContext } from "react-unity-webgl";
import styles from "./WebGLRenderer.module.scss";
import cn from "classnames";
import { Fragment } from "react";
// make sure to install 8.8.0 version of react-unity-webgl before importing this
const WebGLRenderer= ({ ...props }) => {
  // This is the context that Unity will use to communicate with the React app.
  const unityContext = new UnityContext({
    productName: "React Unity WebGL Tests",
    companyName: "Jeffrey Lanters",
    // The url's of the Unity WebGL runtime, these paths are public and should be
    // accessible from the internet and relative to the index.html.
    loaderUrl: props.loader,
    dataUrl: props.data,
    frameworkUrl: props.app,
    codeUrl: props.wasm,
  });

  const [isUnityMounted, setIsUnityMounted] = useState(true);
  const [isLoaded, setIsLoaded] = useState(false);
  const [progression, setProgression] = useState(0);

  // Built-in event invoked when the Unity app is loaded.
  function handleOnUnityLoaded() {
    setIsLoaded(true);
  }

    // Event invoked when the user clicks the button, the unity container will be
  // mounted or unmounted depending on the current mounting state.
  function handleOnClickUnMountUnity() {
    if (isLoaded === true) {
      setIsLoaded(false);
    }
    setIsUnityMounted(isUnityMounted === false);
  }
  // When the component is mounted, we'll register some event listener.
  useEffect(() => {
    unityContext.on("loaded", handleOnUnityLoaded);
    // When the component is unmounted, we'll unregister the event listener.
    return function () {
      unityContext.removeAllEventListeners();
      unityContext.quitUnityInstance();
    };
  }, [props.show]);
  // We'll round the loading progression to a whole number to represent the
  // percentage of the Unity Application that has loaded.
  const loadingPercentage = Math.round(progression * 100);

  return (
    <Fragment>
      <div className={cn(styles.wrapper)}>
        <div className={cn(styles.unityContainer)}>
          {/* loading screen */}
          {isLoaded === false && (
            <div className={styles.loadingOverlay}>
              <div className={styles.progressBar}>
                <div
                  className={styles.progressBarFill}
                  style={{ width: progression * 100 + "%" }}
                />
                <p className={cn(styles.loadingText)}>
                  Loading... ({loadingPercentage}%)
                </p>
              </div>
            </div>
          )}
          {/* The Unity app will be rendered here. */}
          <Unity
            className={cn(styles.unityCanvas)}
            unityContext={unityContext}
          />
        </div>
      </div>
    </Fragment>
  );
};

export default WebGLRenderer;

parent component page

import dynamic from "next/dynamic";
const UnityComponent = dynamic(
  () => import("../../components/WebGLRenderer2019"),
  {
    ssr: false,
  }
);
//opens modal then starts unity engine 
          <FullScreenModal
              modalId={"react-unity-webgl-canvas-1"}
              show={show}
              setShow={() => setShow()}
              ProductObjectThreeDimensional={
                <UnityComponent
                  show={show}
                  loader={`/unity/awningModel/Build/awningModel.loader.js`}
                  data={`/unity/awningModel/Build/awningModel.data`}
                  app={`/unity/awningModel/Build/awningModel.framework.js`}
                  wasm={`/unity/awningModel/Build/awningModel.wasm`}
                />
              }
            />

where did you find the removeAllEventListeners and quitUnityInstance functions?