Trouble while unloading in Next.js

[SneakySensei]

First of all, thank you to the whole community for actively maintaining this package. I've seen a few discussions around Next.js on this repo but I feel my issue is somewhat different.

So I'm able to mount the Unity component properly. For this, I'm disabling SSR completely using the next/dynamic package.
But after changing routes, it throws this error:

I'm calling unload() in a useEffect cleanup function. From the active issues, I can tell that this problem is happening because the canvas unmounts before unity gets a chance to quit properly. I've also tried replacing this with UNSAFE__detachAndUnloadImmediate(), but the issue persists. And we cannot use await inside a cleanup function.

useEffect(() => {
    return () => {
      // unload()
      UNSAFE__detachAndUnloadImmediate()
    }
  }, [])

So what's the recommended way to unload the unity instance on a route change in Next.js?

@jeffreylanters

[abrahamsv99]

I found a workaround for this

When Router Change starts I unload the Unity component like so:

const { unityProvider, isLoaded, unload } = useUnityContext({
    loaderUrl: "/builds/Builds.loader.js",
    dataUrl: "/builds/Builds.data",
    frameworkUrl: "/builds/Builds.framework.js",
    codeUrl: "/builds/Builds.wasm"
})

const router = useRouter();
const bypassConfirmationRef = useRef(false)

useEffect(() => {
    const shouldByPassconfimation = () =>
        bypassConfirmationRef.current;
        
    const handleBrowseAway = () => {
        if (isLoaded) {
            unload()
                .then(() => {
                    bypassConfirmationRef.current = true;
                })
                .catch(e => console.log(e));
        }
        
        if (shouldByPassconfimation()) return;
        
        router.events.emit('routeChangeError');
        throw 'Quitting please wait.';
    };
    
    router.events.on('routeChangeStart', handleBrowseAway);
    
    return () => {
        router.events.off('routeChangeStart', handleBrowseAway);
    };
}, [router.events, isLoaded]);