Unity 2021.2b6 Uncaught DOMException - Canvas requires ID now

[KamilCSPS]

Describe the bug
"Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#'" is thrown when loading a build. No errors are thrown when using default Unity WebGL template with index.html.

To Reproduce
Steps to reproduce the behavior:

1. Build empty WebGL build in a react-unity app.
2. Notice WebGL build not loading with "Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#'" error.
3. Add ID to canvas, reload.
4. Build works with ID on canvas.

Expected behavior
Same content built with Unity 2021.1f14 works seamlessly with same setup.

Screenshots
N/A

Details (please complete the following information):

• React Unity WebGL Version: 8.4.9
• Device and OS: Win10
• Browser: Chrome 92.0.4515.107
• NodeJS Version: 12
• Bundler: Webpack 5.5.0

Additional context
N/A

[romy-piche]

I think I found the issue: Unity seems to have changed the way to get the canvas in the 2021.2 version, and now uses the canvas id element. Since the canvas created by React Unity WebGL has no id element, it tries to find it with an empty id using querySelector, which is invalid:
document.querySelector("#")
I was able to recreate the same error by removing the id element of the canvas in the html file generated by Unity.

[jeffreylanters]

Thanks for doing some research. And oh well... once again Unity breaks existing implementations. I see this version of Unity seems to be still in beta. I'll look into this. Thanks again for reporting and your research.

[jeffreylanters]

Update: It's not documented yet in their Unity 2021.2 documentation. Therefor I will wait with the upgrade until this Unity version is out of beta.

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[SaIG]

2021.2 is now out of beta ... and just ran into this issue ... is there a way for quick and dirty fix? Adding just a canvas id raised just more issues ^^

[jeffreylanters]

What a poor decision by Unity. I'm working on a big release including lots of new features and a complete functional rewrite. I will add support for this as well, I'm available tomorrow and will try to push this version out as soon as possible. I'll keep you posted on this thread.

[jeffreylanters]

@SaIG @CarpetHead @kamilda I've installed Unity 2021.2.0f1 and made a build of a new empty project. But the createUnityInstance still takes a Canvas Element rather than an Element id. Am I missing something...?

Screenshots from the generated Unity default WebGL template:

[jeffreylanters]

Running a Unity 2021.2.0f1 build using an Element reference instead of an ID. Can be confirmed by the updated splash screen.

[SaIG]

@jeffreylanters Okay thx 4 checkin & sry for the hassle then ... i have to check my implementation .. its a bit strange because the only thing i changed is switching 2021.1 to 2021.2 version. Let me reevalute this ...

[CarpetHead]

It's not the constructor, it's something deep within the build JavaScript. The stack trace of the error suggests it comes from emscripten. I honestly have no idea what the cause of the issue is, but 2021.2 has this issue and 2021.1 does not. Are you unable to reproduce it when using react-unity?

[jeffreylanters]

Hm. Yup, I've installed the latest fresh release op Unity 2021.2, made a WebGL build and tried it within react-unity-webgl. Everything runs as expected. Also when looking at the actual Unity build I notice that they also still use a canvas reference rather than a ID. So I'm not able to reproduce this.

[CarpetHead]

my error logs are very input related, perhaps try enabling the new input backend?

(Active Input Handling)

[CarpetHead]

if it is of any value, this is the full stacktrace of the issue

[CarpetHead]

modifying unity.js to this fixes it:

    return react_1.createElement("canvas", {
        id: "unity-canvas",
        ref: function (ref) { return (_this.htmlCanvasElementReference = ref); },
        className: this.props.className || "",
        tabIndex: this.props.tabIndex || undefined,
        style: this.props.style || {},
    });

[jeffreylanters]

I am completely lost. I can try enabling the new input system, but this still does not make any sense regarding the element id. On what is the ID "unity-canvas" based? The module supports having multiple Unity Instances at once. Could you try building an empty Unity project to see if the issue is project (config) or Unity package manager dependency related?

[CarpetHead]

I just copied that ID directly from the template files that unity provides alongside a build. Perhaps you could make the id match the class name? the fix works perfectly for me, although I have no idea how I would go about actually fixing it in a way that will reach our build server?

[jeffreylanters]

It might just require AN id to be used internally within the Unity framework. I can add a unique id per canvas to prevent this error from occurring. For now this hack should prevent the error from occurring as well:

import React, { useEffect, useState } from "react";
import Unity, { UnityContext } from "react-unity-webgl";

const unityContext = new UnityContext({
  loaderUrl: "build/myunityapp.loader.js",
  dataUrl: "build/myunityapp.data",
  frameworkUrl: "build/myunityapp.framework.js",
  codeUrl: "build/myunityapp.wasm",
});

function App() {
  useEffect(function () {
    unityContext.on("canvas", function (canvas) {
      canvas.id = "unity-canvas";
    });
  }, []);

  return <Unity unityContext={unityContext} />
}

[CarpetHead]

I actually tried that first, but it looks like the error happens before the callback, so that hack didn't work for me. Let me have another try

[jeffreylanters]

Ah, sorry I did not try it before posting. I can release a hot fix which adds a unique identifier for now while I work on the recode.

[CarpetHead]

if possible that would be perfect, can test it whenever you have something

[CarpetHead]

looks like it also works with a random id - "asdf" worked perfectly

[jeffreylanters]

I've just published a patch release version 8.5.2 which includes a unique identifier for each Unity Canvas instance. Could you try this?

[CarpetHead]

works :)

[jeffreylanters]

Thank you so much for helping and testing! If you run into other problems, please keep me posted.