Using react-unity-webgl with Next JS

[3y3net]

Hi,
I'm trying to use the library in my project bur, as it uses Next JS I got the error: "ReferenceError: window is not defined"

I tried to use inside a useEffect block but I got weird errors. Can you tell me the right way to use your library in a React/Next JS project?
Thanks!

[jeffreylanters]

Hi! Thanks for your message. I checked it out and noticed there is a scenario where this error can occur. I'll deploy a hot fix right away! I'll keep you posted on this thread.

[3y3net]

Thanks a lot... I was getting crazy :)

[jeffreylanters]

Some hook was trying to access the window without checking if it was available, this is a problem which would only occur during server side rendering. I just published version 8.7.0. Could you check it out?

[3y3net]

Still the same error... this is the stack trace

index.js?46cb:323

   Uncaught     at UnityContext.EventSystem (file:///home/javi/marketplace-eth/node_modules/react-unity-webgl/distribution/library/event-system.js:51:9)
at new UnityContext (file:///home/javi/marketplace-eth/node_modules/react-unity-webgl/distribution/library/unity-context.js:68:28)
at WebGL (webpack-internal:///./components/ui/common/webgl/index.js:15:26)
at processChild (file:///home/javi/marketplace-eth/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
at resolve (file:///home/javi/marketplace-eth/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
at ReactDOMServerRenderer.render (file:///home/javi/marketplace-eth/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
at ReactDOMServerRenderer.read (file:///home/javi/marketplace-eth/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
at Object.renderToString (file:///home/javi/marketplace-eth/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
at Object.renderPage (file:///home/javi/marketplace-eth/node_modules/next/dist/server/render.js:686:46)
at Object.defaultGetInitialProps (file:///home/javi/marketplace-eth/node_modules/next/dist/server/render.js:316:51)
at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:145:20)
at Object.loadGetInitialProps (file:///home/javi/marketplace-eth/node_modules/next/dist/shared/lib/utils.js:69:29)
at renderDocument (file:///home/javi/marketplace-eth/node_modules/next/dist/server/render.js:699:48)
at Object.renderToHTML (file:///home/javi/marketplace-eth/node_modules/next/dist/server/render.js:774:34)
at async doRender (file:///home/javi/marketplace-eth/node_modules/next/dist/server/next-server.js:1438:38)
at async (file:///home/javi/marketplace-eth/node_modules/next/dist/server/next-server.js:1533:28)

[3y3net]

Some more info here: https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97

Instead of test
if (window !== undefined)

It is recommended to use
if (typeof window !== "undefined")

Notice the "undefined" with commas!

[jeffreylanters]

I've pushed a version (8.7.1) with stricter undefined checking. Could you check it out?

[3y3net]

Now I got another error in the console

use-unity-loader.js?b082:35

GET http://localhost:3000/Build/deploy.loader.js net::ERR_ABORTED 404 (Not Found)
eval @ use-unity-loader.js?b082:35
invokePassiveEffectCreate @ react-dom.development.js?ac89:23487
callCallback @ react-dom.development.js?ac89:3945
invokeGuardedCallbackDev @ react-dom.development.js?ac89:3994
invokeGuardedCallback @ react-dom.development.js?ac89:4056
flushPassiveEffectsImpl @ react-dom.development.js?ac89:23574
unstable_runWithPriority @ scheduler.development.js?bcd2:468
runWithPriority$1 @ react-dom.development.js?ac89:11276
flushPassiveEffects @ react-dom.development.js?ac89:23447
eval @ react-dom.development.js?ac89:23324
workLoop @ scheduler.development.js?bcd2:417
flushWork @ scheduler.development.js?bcd2:390
performWorkUntilDeadline @ scheduler.development.js?bcd2:157

But I think is my fault... let me double check a couple of things

[3y3net]

Well, it was my fault, I have bad configured the paths...

But now I fixed it and I got another error...
This is shown in the npm terminal

error - Error: ENOTDIR: not a directory, access '/home/javi/marketplace-eth/pages/Build/deploy.loader.js/index.tsx'

And this is the stack trace

use-unity-loader.js?b082:35

   GET http://localhost:3000/Build/deploy.loader.js net::ERR_ABORTED 500 (Internal Server Error)

eval @ use-unity-loader.js?b082:35
invokePassiveEffectCreate @ react-dom.development.js?ac89:23487
callCallback @ react-dom.development.js?ac89:3945
invokeGuardedCallbackDev @ react-dom.development.js?ac89:3994
invokeGuardedCallback @ react-dom.development.js?ac89:4056
flushPassiveEffectsImpl @ react-dom.development.js?ac89:23574
unstable_runWithPriority @ scheduler.development.js?bcd2:468
runWithPriority$1 @ react-dom.development.js?ac89:11276
flushPassiveEffects @ react-dom.development.js?ac89:23447
eval @ react-dom.development.js?ac89:23324
workLoop @ scheduler.development.js?bcd2:417
flushWork @ scheduler.development.js?bcd2:390
performWorkUntilDeadline @ scheduler.development.js?bcd2:157

[3y3net]

Well... forget about it... this stuff are errors related to how Next JS works.

I simply moved all files to the 'public' folder of Next JS and disble compression at unity.

IT WORKS!!!!!!

THANKS!!!!

[3y3net]

So, let me explain the process carefully to allow others use your lib with NEXT JS

1. Download the latest version of the Library that includes the changes for Next JS (server side rendering)
2. Make a deployment on Unity without compression (probably, it will work compressed in a server, but for developing, use uncompressed deployment)
3. Place the directories 'Build' and 'TemplateData' in the 'public' folder at your project
4. Use this configuration:
   const unityContext = new UnityContext({
   loaderUrl: "Build/deploy.loader.js",
   dataUrl: "Build/deploy.data",
   frameworkUrl: "Build/deploy.framework.js",
   codeUrl: "Build/deploy.wasm",
   });

DONE!!!

Some other advises...

• create the 'unityContex't const outside any function, preferible in the index.js, just after the 'imports'
• By default the canvas will be rendered smaller than it is. You can set the size with some styles, for example <Unity unityContext={unityContext} style={{ width: "100%", height: "100%" }}/>
• A good practice is to use an "onLoaded" event to know when the Unity app is fully loaded. Tale a look at this code, taken from this forum:

` const [isLoaded, setIsLoaded] = useState(false);

useEffect(function () {
console.log('Unity load start');
unityContext.on("loaded", function () {
setIsLoaded(true);
});
unityContext.on("debug", function (message) {
console.log(message);
});
}, []);`