jeffreylanters / react-unity-webgl

React Unity WebGL provides a modern solution for embedding Unity WebGL builds in your React Application while providing advanced APIs for two way communication and interaction between Unity and React.
https://react-unity-webgl.dev
Apache License 2.0
1.7k stars 160 forks source link

Unable to Load react-unity-webgl in routing #521

Open malikrizwannarsun opened 10 months ago

malikrizwannarsun commented 10 months ago

Please avoid duplicates

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>
    );
}

image

Would you be interested in contributing a fix?

gngriffiths commented 8 months ago

Switching from BrowserRouter to HashRouter solved the issue for me.