Unity 2021.2 build throws error when removing the canvas before invoking Quit on the Unity Instance

[atomicptr]

Hey, I'm trying to use this component in conjunction with React Router. The Unity component gets unmounted as intended, but still spams through my console logs and also still hogs quite a lot of resources. Which led me to believe that it didn't properly unmount.

[jeffreylanters]

Hey @atomicptr, can you see in your inspector if the script tags for the UnityLoader are still there? Are they removed properly?

[atomicptr]

It doesn't remove the script tags it adds properly, it actually adds more each time I mount (and unmount) the component.

[jeffreylanters]

Ah I see, they should unmount as well. I'm looking into it!

[jeffreylanters]

It seems like Unity adds these scripts in runtime. The UnityLoader itself gets unmounted properly. I’m going to try to fix this. I’ll keep you up to date on this thread.

[jeffreylanters]

This seems to be a Unity issue (ref1) (ref2). But their solution is by using an iFrame, which is obviously no options for this module. I will contact Unity about this issue and will keep you updated on this thread.

[hcharley]

I just discovered this issue myself independent of this project. Was hoping you all might have figured it out.

Grateful that it looks like @jeffreylanters is making progress!

[YCMitch]

I don't suppose there's been any progress with this one, @jeffreylanters?

Failing that, is anyone aware whether there would be any dramas with just using the iframe method within a component?

[jeffreylanters]

No, I’m sorry.. I action on sevral forms to get it fixed (or find an temporary hack-around). But no success yet. And the iFrame is no option indeed.

[jeffreylanters]

I have released a temporarily fix for this issue. The Unity code will no longer be unmounted and will be overwritten when launching another Unity component.

I will keep this issue open since this needs a better fix. I'm still in touch with other developers trying to fix this. Unity has answered saying there is no solution for this right now.

[hcharley]

@jeffreylanters Trying to understand your fix by reading your merged code and this:

Unity code will no longer be unmounted

Will the game just hang around on the DOM? And will, for instance, the audio of the game keep playing after the game parent component is unmounted?

[jeffreylanters]

I have not tested audio. But the canvas will be unmounted anyway, I guess this emits the audio as well. The DOM will be cleared. But some background progresses will continue until you mount another Unity Component. It's a temporarily fix to stop errors from flowing.

[hcharley]

Ah, I see. This solution will silence the console. Thank you.

[smilexu]

@jeffreylanters I am getting exact same issue with react-unity-webgl version 7.0.6. Could you give some help ?

@atomicptr did you solve that ?

[atomicptr]

We just decided to force page reloads when you go to another route from the page with the unity component.

[smilexu]

hum... yeah, that is also my backup solution, not good but works 😢

BTW, so that means that patch does not for work for you either ?

[jeffreylanters]

@smilexu All the patch does is making sure the canvas is removed and no error's will occur. The Unity WebGL build will keep running in the background because there is no way to stop that. When you mount another Unity component, it will overwrite the previous.

Sadly Unity's WebGL export does not have any functionality for unloading a build. I've had contact with some of Unity's developers. But at the moment, there is no way to unload. And this is an ongoing problem since Unity 5.6... 🙄

[jeffreylanters]

Another recent forum post about unloading Unity (using another SPA, Angular) leads to the only solution at the moment have to reload the page...

[smilexu]

Thanks for reply, then I will keep reload solution for the moment, but still your work is great.

[ejazahmed95]

Observed this issue when audio didn't stop playing. The audio just keeps playing and if I mount the component again, a new audio instance just gets overlapped. Is there a way to reset the audio on page through some javascript code? Reloading would be my last option.

[jeffreylanters]

Sorry - Someone from the Unity Development team I'd contacted a while ago said there is currently no way to unload the Unity Player. And there is no implementation on the roadmap. JavaScript does not support any kind of unload at the moment as well. Unity suggests placing in into an iFrame (which is no option of course), or reloading the page.

[petejungwirth]

Was there a reversion on the workaround? I'm seeing the console getting spammed (same as the OP) when I unmount my component.

[jeffreylanters]

@petejungwirth, no. I should not do that. Can you post a screenshot of your console? On what platform, browser, Unity version and package version are you?

[petejungwirth]

Thanks for the quick response. Chrome Browser, Unity 2018.3.5, have seen it with both react-unity-webgl 7.0.8 and 7.0.9.

Here's the console:

[jeffreylanters]

@petejungwirth This looks like the same problem, it's might be back due to a Unity update. The best tips I can give, since Unity is not letting us unload their player yet are;

• Option 1 is to reload the page when navigating away from a react unity webgl enabled page.
• Option 2 is to send a message unity this library to your unity content telling it simple load a completely empty scene. When the user encounters a new react unity webgl instance, it will overwrite the previous instance so no memory loss should occur.

I hope this helps. Keep me up date if you want to :)

[jeffreylanters]

Wait, what, I've just bumbed into an forum post by one of the devs of Unity speaking of a new functionality to unload Unity builds from JavaScript memory as I've requested over more than a year ago!

I'll be implementing a test right now. If any of you could helping testing this feature it would be much appreciated! For further details please see the patch branched as referred on PR #60 "Patch for an issue which made it not possible to properly unmount a Unity instance".

[petejungwirth]

Thanks @jeffreylanters! I'll use the workaround in the short term. May be a little bit before I can try the 2019.1 but will definitely test the patch as soon as I can.

[matthieu994]

Wait, what, I've just bumbed into an forum post by one of the devs of Unity speaking of a new functionality to unload Unity builds from JavaScript memory as I've requested over more than a year ago!

I'll be implementing a test right now. If any of you could helping testing this feature it would be much appreciated! For further details please see the patch branched as referred on PR #60 "Patch for an issue which made it not possible to properly unmount a Unity instance".

Hi ! How do I use the new function Quit on the UnityComponent ? I've fetched the sources files of the PR #60.

[MuhammadFaizanKhan]

Wait, what, I've just bumbed into an forum post by one of the devs of Unity speaking of a new functionality to unload Unity builds from JavaScript memory as I've requested over more than a year ago! I'll be implementing a test right now. If any of you could helping testing this feature it would be much appreciated! For further details please see the patch branched as referred on PR #60 "Patch for an issue which made it not possible to properly unmount a Unity instance".

Hi ! How do I use the new function Quit on the UnityComponent ? I've fetched the sources files of the PR #60.

Whats your suggestion is this working fine? remember Unity 2019.1 is in beta format so we can't use it production right now so problem will remain the same.

[jeffreylanters]

@matthieu994 Just by simply unmounting the component where you're using theUnity component. That should throw errors before which should be gone right now.

[jeffreylanters]

FYI, this issue has been fixed in the recently published version 7.1.0! Since it does require Unity 2019.1 or newer, I'm going to leave this issue open as a knowledge base for other people that might run into this problem. Thank you all for helping and testing with me! 🎉

[petejungwirth]

Works beautifully. Thanks Jeffrey!

[hcharley]

@jeffreylanters Way to go, thank you for documenting this.

[jsdu]

We are using 2018.3.2f1, any chance this issue can be solved for prior versions of Unity?

[jeffreylanters]

@jsdu No, sorry. I've had contact with Unity. They've said me it's not possible, the only solution is upgrading to Unity 2019 or newer.

[garayco]

Hello. I have a Question. How can I unmount the unity component. my problem is that if I change the page, unity-webGl still loading :(

[EpicNicks]

could an Application.Quit get sent to the running instance?

[timdavish]

Hey @jeffreylanters , I'm curious if an issue I'm seeing is in some way related to this one. The following errors occur after loading the game, and then navigating away (and unmounting the Unity component):

Once these errors start happening, the abort(230) error happens repeatedly and very rapidly starts hogging more and more resources until my entire laptop completely freezes (this happens within ~60 seconds on a 2019 Macbook Pro).

After some messing around, so far I've found that passing this:

{
  modules: {
    onAbort: () => {},
  },
}

as the unityConfig option to new UnityContent() seems to prevent the infinite error loop, reducing the above error to the following:

And this seems to work fine for our situation, but I'm just curious if you know anything more about this, or a better way to handle it. Thanks in advance!

[jeffreylanters]

When using ReactUnityWebGL 8.0.0 for Unity 2020 unmounting and remounting should work without any problem.

[handrei]

Hello, i'm using next.js and when going out on another route, i still got the problem. using this package at version 7.1.10. i tried installing the last version, but that way the unity context isn't loading... anyone there still using 7.1.10 and not with iframe ?

[jeffreylanters]

I'm sorry, the problem is on Unity's side really with this issue. The main reason it's fixed in 8.0.0 and up is because it's supporting unity 2020.1 and up exclusively.

[abdulmannan-arthur]

I am using the latest version of both .. Unity > 2020.1 and react-unity-webgl > 8.0.2 but still having error on unmounting. May be I am missing something. Here is the error I am facing at the moment

WGL.loader.js:1 exception thrown: RuntimeError: memory access out of bounds,RuntimeError: memory access out of bounds at http://localhost:8080/webgl/Build/WGL.wasm:wasm-function[484]:0x65f7a at http://localhost:8080/webgl/Build/WGL.wasm:wasm-function[7166]:0x29ef8b at http://localhost:8080/webgl/Build/WGL.wasm:wasm-function[6532]:0x2555fc at http://localhost:8080/webgl/Build/WGL.wasm:wasm-function[6509]:0x254e82 at http://localhost:8080/webgl/Build/WGL.wasm:wasm-function[7194]:0x2a21a1 at http://localhost:8080/webgl/Build/WGL.wasm:wasm-function[6407]:0x251595 at http://localhost:8080/webgl/Build/WGL.wasm:wasm-function[10408]:0x3f1817 at http://localhost:8080/webgl/Build/WGL.wasm:wasm-function[10383]:0x3ef490 at http://localhost:8080/webgl/Build/WGL.wasm:wasm-function[10321]:0x3e4bcf at http://localhost:8080/webgl/Build/WGL.wasm:wasm-function[10320]:0x3e4a20 at dynCall_v (http://localhost:8080/webgl/Build/WGL.wasm:wasm-function[65714]:0x1284256) at Object.dynCall_v (http://localhost:8080/webgl/Build/WGL.framework.js:2:485902) at browserIterationFunc (http://localhost:8080/webgl/Build/WGL.framework.js:2:179048) at Object.runIter (http://localhost:8080/webgl/Build/WGL.framework.js:2:182109) at Browser_mainLoop_runner (http://localhost:8080/webgl/Build/WGL.framework.js:2:180571)

We are using antd and using that webgl build in one of the registration step. Everything working fine except that above error. We need to move the user to next step once user hits Finish in the webgl build but right at that time we are having this error in an alert. Debugged everything on Unity end and its working fine there. Any idea ? pasting a bit of code to give you guys an idea of what we are doing.

<Unity unityContext={unityContext} height="400px" width="100%" />

unityContext.on('receive', textData => { // receiving the data here on clicking finish });

We are receiving the info but then we need to change the screen and when we do so, it throws the above error.

[tarunspartan]

I'm using unityContent.remove() at useEffect as cleanup. But I still getting loads of these errors 👇👇👇

Can somebody help me here? I'm in a rush as I have to complete this as quickly as I can.

here is my react code 👇

useEffect(() => { if (props.location && props.location.state === undefined) { props.history.push('/rooms') } return () => { unityContent.remove() } }, [])

[Vladis466]

@jeffreylanters I'd like to clarify if this is working properly. I've done a simple test and on continually remounting the component, the memory footprint grows indefinitely. You can reproduce this test by starting the test project with chrome, opening the chrome task manager, and watching the allocated native memory continually grow every time you re-mount the component.

While not a huge issue here, for a larger unity application this becomes unwieldy very quickly.

[daltongray]

I'm getting loads of errors on unmount. Using react-unity-webgl v8+, and Unity 2020.

Performance warning: deleting framebuffer on context thread release!!!! exception thrown: RuntimeError: memory access out of bounds,RuntimeError: memory access out of bounds Uncaught RuntimeError: memory access out of bounds

And I get more than a dozen of these: GET blob:http://localhost:3000/5a709e86-827f-4e69-aafd-57ec9a14b560:wasm-function[3209]:0x153c47 net::ERR_FILE_NOT_FOUND It seems some of the unity application is still looking for the config files.

[tarunspartan]

const [unityContent, SetunityContent] = useState(new UnityContent( "viewer/Build/WebGL.json", "viewer/Build/UnityLoader.js" ))

useEffect(() => { if (props.location && props.location.state === undefined) { props.history.push({ pathname: "/anypath" }) } return () => { unityContent.remove() SetunityContent(null) } }, [])

This helped me to unmount properly.

[daltongray]

@tarunspartan - I'm not sure we're in the same version of react-unity-webGl, unityContent.remove() is not a function in the latest release. Additionally, unityContent has been renamed to unityContext. (but I could be mixed up.)

It looks like the errors I posted earlier, ie: Performance warning: deleting framebuffer on context thread release!!!! were related to a bug in application.Quit().

**Switching the unity player settings from color space: linear, to color space: gamma fixed this issue for me. **

It remains to be seen whether this is a long term solution.

[burakkaraceylan]

I have the same problem with Unity 2020.3.8f1 and react-unity-webgl 8.8.0. It seems to get stuck on a quit loop with bunch of "Build.wasm:0x35127d Uncaught RuntimeError: memory access out of bounds".

Seems related to https://github.com/jeffreylanters/react-unity-webgl/issues/250

[tarunspartan]

Still facing this problem with 8.8.0 & Unity 2021. Any quick fixes?

[ShawnCentra]

Also seeing this same issue with "react-unity-webgl": "^9.0.3", and Unity 2021 Seems like there's a lack of support here for this newer version - whats the most stable one? 8.8.0 and Unity 2019?

[jeffreylanters]

I am reopening this issue, since it is very similar to the problem which is introduced in Unity 2021.2 builds.

[jeffreylanters]

Status update; this issue is at the time of writing this still relevant. An error is thrown by Unity when the canvas is being unmounted before the Unity Application is being unloaded. In builds created with prior to Unity 2021.2, unloading was required as well, but it was safe to unmount the canvas even before unloading was completed.

A "workaround" for builds created with Unity 2021.2 or newer is available, this can be accomplished by halting the unmount until the unload's promise is resolved. I've update the documentation to reflect this; https://react-unity-webgl.dev/docs/api/unload.

The following gif shows this in action:

[ShawnCentra]

@jeffreylanters Looks like a good work around, thanks Jeffrey

[alexisdavidson]

@jeffreylanters Thank you for the work around! Is there a way to call this unload() function upon leaving the page? Should "unload()" be called for every button on my website menu? What if the user clicks on the "Back" button from the browser?

[Nizomjon1994]

@jeffreylanters Thank you for the work around! Is there a way to call this unload() function upon leaving the page? Should "unload()" be called for every button on my website menu? What if the user clicks on the "Back" button from the browser?

Did you find the solution ? for "What if the user clicks on the "Back" button from the browser?"