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

[Gareth Griffiths]

Switching from BrowserRouter to HashRouter solved the issue for me.