Warning: Prop id did not match ERROR, unable load WEBGL Unity Game

[xavieracaling]

Help! This is the error I'm getting, here's my code as well, I've followed the installation guide yet , can't load my unity webgl game.
I'm using nextjs

[kristofferso]

The problem is caused by the internal hook useUnityCanvasId inside react-unity-webgl which increments the id each time the hook is called. It's called when Next is prerendering the component server side, and then again on the client – which causes the id to mismatch.

use-unity-canvas-id.js:

var useUnityCanvasId = function () {
    /**
     * A unique identifier for a Unity canvas element is memorized.
     */
    var unityCanvasId = (0, react_1.useMemo)(function () {
        // The Unity canvas ID is generated by concatenating the Unity canvas ID
        // prefix with the canvas count. Every time this value is requested, the
        // canvas count is incremented.
        return [unityCanvasIdPrefix, ++unityCanvasCount].join("-"); <--- PROBLEM
    }, []);
    return unityCanvasId;
};

Perhaps a fix here is to provide the option to explicitly override the id on the Unity instance. Example: <Unity canvasId="my-only-canvas" />. Thoughs on that @jeffreylanters?

Also, thank you for building such a well documented library!

[EricBlanchard]

Did you end up finding a workaround or solution for this? I've just come across this issue as well.

[kristofferso]

Hey @EricBlanchard. The temporary workaround I've found so far is hard coding a static value instead of calling the useUnityCanvasId hook. Since I haven't gotten any reply from @jeffreylanters I'll probably end up forking the repo and adding a prop to the hook that overrides the incrementation, which is a more viable solution.

[EricBlanchard]

Thanks for the reply! That's basically what I did as well, but I did it inside of the hook.

[jeffreylanters]

Hi @kristofferso, sorry I haven't been able to answer any time sooner due to some personal things. - I like your proposal of overwriting the id. I will take a look at it today - if everything works as expected, then I will try to make a release today!

[kristofferso]

No problem at all! If you have the time, that would be great 😄 Let me know if I can help

[jeffreylanters]

@xavieracaling @kristofferso @EricBlanchard I've added support for setting a custom canvas id in release v9.5.0. I've added further details to the React Unity WebGL Documentation.

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

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

  return <Unity unityProvider={unityProvider} id="my-canvas-id" />;
}

I'd love to hear your feedback, if you have any improvements or feedback - please let me know! Oh, and a happy new year! 🎉

[kristofferso]

Works great! The error is completely gone in Next.js 14 using the app router. 👏