Unable to Load react-unity-webgl in routing

[malikrizwannarsun]

Please avoid duplicates

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

Language and Compiler

Vanilla JavaScript

What environment are you using?

Local Development Server

When does your problem occur?

When the Unity Component mounts

What does your problem relate to?

The problem seems Module related

React-Unity-WebGL Version

9.4.3

React Version

17.0.2

Unity Version

2022.1.16f

What happened?

I am using react-unity-webgl for loading unity game. Its working fine when i am in App.js file. But when i use routing its crash and didn't show anything. If i dont use react-unity-webgl then other things are working fine. I searched alot but didn't find any solution

Reproducible test case

import {Box, Card, Container, Grid, Input, InputAdornment, Stack, Typography,} from '@mui/material';
import { Unity, useUnityContext, } from "react-unity-webgl";
import {styled} from "@mui/material/styles";
import useSettings from "../../hooks/useSettings";
import Page from "../../components/Page";
import cssStyles from "../../utils/cssStyles";



const APPBAR_MOBILE = 50;
const APPBAR_DESKTOP = 64;
const SearchbarStyle = styled('div')(({theme}) => ({
    ...cssStyles(theme).bgBlur(),
    // top: 0,
    // left: 0,
    zIndex: 99,
    width: '90%',
    display: 'flex',
    // position: 'absolute',
    alignItems: 'center',
    borderRadius: 8,
    height: APPBAR_MOBILE,
    padding: theme.spacing(0, 1),
    boxShadow: theme.customShadows.z8,
    [theme.breakpoints.up('md')]: {
        height: APPBAR_DESKTOP,
    },
    [theme.breakpoints.down('md')]: {
        height: APPBAR_MOBILE,
        padding: theme.spacing(0, 1),
        width: '96%',
    },
}));

export default function UnityGame() {

    const { unityProvider,unload } = useUnityContext({
  
        loaderUrl: 'Build/Build.loader.js',
   dataUrl: 'Build/Build.data',
   frameworkUrl: 'Build/Build.framework.js',
   codeUrl: 'Build/Build.wasm',
 
   
   });

    const {themeStretch} = useSettings();
    return (
        <Page title="Ecommerce: Product List">
            <Container maxWidth={'xl'}>
            <Unity unityProvider={unityProvider}  />
         
            </Container>
        </Page>
    );
}

Would you be interested in contributing a fix?

• yes, I would like to contribute a fix

[gngriffiths]

Switching from BrowserRouter to HashRouter solved the issue for me.

[Arthurgamer1]

I have the same issue, where UnityWebGL is stuck on the loading scene. I used Unity 2022.3.45f1, then loaded using HashRouting pages in React with Vite (jsx files), anddespite having hashrouting the problem persist.

Here is the code:

import '../App.css';
import React from "react";
import Header from '../components/Header';
import Footer from '../components/footer';
import { Unity, useUnityContext } from "react-unity-webgl";

function Game() {
const { unityProvider, loadingProgression, isLoaded } = useUnityContext({
loaderUrl: "../../public/buildUnity/Builds WorldeCrackdown.loader.js",
dataUrl: "../../public/buildUnity/Builds WorldeCrackdown.data",
frameworkUrl: "../../public/buildUnity/Builds WorldeCrackdown.framework.js",
codeUrl: "../../public/buildUnity/Builds WorldeCrackdown.wasm",
});

return (

    <div>
        <Header />
        <div id="GameSection">

            {!isLoaded && (
                <p>Loading Application... {Math.round(loadingProgression * 100)}%</p>
            )}
            <Unity

                unityProvider={unityProvider}
                style={{
                    visibility: isLoaded ? "visible" : "hidden",
                    width: "75%",
                    height: "84vh",
                    justifySelf: "center",
                    alignSelf: "center"
                }}
            />
        </div>
        <Footer />
    </div>


);

}

export default Game

I also want to add that the component runs in npm run dev, but not after the web is built, npm run build.