Code Works on a fresh create-react-app, but not a type script NextJS project

Please avoid duplicates

[X] I checked all open issues and discussions and none of them matched my problem.

Language and Compiler

Babel and WebPack TypeScript

What environment are you using?

Local Development Server

When does your problem occur?

When the Context is created

What does your problem relate to?

The problem seems React related

React-Unity-WebGL Version

9.0.4

React Version

18.2.0

Unity Version

2021.1.16f

What happened?

Used my unity app with a default create react app, and it worked. Then, I tired to take the same code, and have it work i n NextJS, and we get

and nothing happens, webgl app is not shown on the page.

I also noticed that each time I refresshed the page, I saw;

i.e. react-unity-webgl-canvas-{n} increments by one each time. Is this expected?

Thanks, in advance, Cheers

Reproducible test case

import { Unity, useUnityContext } from "react-unity-webgl";

function App() {
  const { unityProvider } = useUnityContext({
    loaderUrl: "./build/builds.loader.js",
    dataUrl: "./build/webgl.data",
    frameworkUrl: "./build/build.framework.js",
    codeUrl: "./build/build.wasm",
  });

  return (
    <Unity
      unityProvider={unityProvider}
      style={{ width: "1920px", height: "1080px" }}
    />
  );
}

export default App;

Would you be interested in contributing a fix?

[X] yes, I would like to contribute a fix

jeffreylanters / react-unity-webgl

Code Works on a fresh create-react-app, but not a type script NextJS project #417