getBoundingClientRect problem

Hey,

I have a SPA and on a page there is a Unity WebGL container. I build the project with Unity 2020.3.24f1 and it works fine.

I upgraded to a newer version of Unity (2022.1.6f1), but a problem occurred. After I change to another page (leaving the unityscene) my browser's console log is spammed everytime I move the mouse.

Code (JavaScript):

1. Build.framework.js.br:3
2.     Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
3.     at _JS_DOM_MapViewportCoordinateToElementLocalCoordinate (Build.framework.js.br:3:26672)
4.     at Build.wasm.br:0x4582a0
5.     at Build.wasm.br:0x43a194
6.     at Build.framework.js.br:3:184174
7.     at Object.mouseEventHandlerFunc [as handlerFunc] (Build.framework.js.br:3:184210)
8.     at jsEventHandler (Build.framework.js.br:3:154713)

I tried to downgrade to the latest LTS (2021.3.5f1), but this behaviour is still there. Again, it only occurs AFTER leaving the page (while on the page everything is fine without an error)

I even tried everything with a complete new, empty project & scene (2022.1.6f1 & 2021.3.5f1) but the error still remains. If the old version (2020.3.24f1) is used it's fine again.

Does anyone have an idea how to fix it?
Thank you

 

Found any solution? Have the same problem

 

Yes, but not a satisfying one.

BEFORE the user leaves the page you have to call

• C#: call Application.Quit() or
• JS: call unityInstance.Quit(callback)

to free memory and remove any listeners (src).

So you have to have a QUIT button and hope the user clicks it OR by using the "beforeunload" event. This event triggers a confirmation dialog asking the user if they really want to leave the page. The problem here is, that the message isn't customisable and WILL confuse some users

 

We are having the same problem when using https://react-unity-webgl.dev/docs/introduction in our project.
We'd expect that a ready to use unity react component does handle this by itself but doesn't.

We'll try manually calling the Application.Quit to see if this changes anything.

Anybody found a better solution ?

 

You have to manually quit your application. There is no other way.
We are also using the React Unity WebGL Component by Jeffrey Lanters and hooked it on the return of the useEffect.

Code (JavaScript):

1. useEffect(() => {
2.     if (isLoaded) {
3.         initialLoad()
4.     }
5.  
6.     return () => {
7.         detachAndUnloadImmediate()
8.     }
9. }, [isLoaded, detachAndUnloadImmediate])

For further code and information visit this issue: https://github.com/jeffreylanters/react-unity-webgl/issues/22

 

Hi!
I also have the same problem with UnityWebGL in an Angular Application
I tried different ways (Quit in ngOnDestroy, moved UnityInstance in a Service), but nothing helped to Quit the Unity Instance fast/safe enough.
Has anyone a solution for a Unity WebGL in an Angular Component?

 

Hello Team,

Having added UnityWebGL to Angular 12, I am still having issues quitting the function in ngOnDestroy. However, if I use the button and click on Quit Function, it will work. Does anyone know if there is a solution for this on ngOnDestroy?

 

Hi I am using unity 2021.3.16f1LTS version and using WebXR plugin to create WebXR but when i create webgl build form unity and run it using xampp. In VR all works but when i click on AR button it give me an error

TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
at _JS_DOM_MapViewportCoordinateToElementLocalCoordinate (blob:http://localhost:88/ebd8b654-8bcb-465e-8750-5d0b69213c3d:1137:27466)
at wasm://wasm/04e4e5fe:wasm-function[10037]:0x2e0007
at wasm://wasm/04e4e5fe:wasm-function[34836]:0xa00f6e
at wasm://wasm/04e4e5fe:wasm-function[32261]:0x99706c
at blob:http://localhost:88/ebd8b654-8bcb-465e-8750-5d0b69213c3d:1137:210917
at Object.mouseEventHandlerFunc [as handlerFunc] (blob:http://localhost:88/ebd8b654-8bcb-465e-8750-5d0b69213c3d:1137:210953)
at jsEventHandler (blob:http://localhost:88/ebd8b654-8bcb-465e-8750-5d0b69213c3d:1137:181329)

 

Okay, Thank you for your reply. I have solved the issue by changing the color spece to gamma and then Testing with the immersive web emulator.
this worked for me