はじめに
Unity では WebGL 向けビルドでブラウザと連携するために JavaScript のプラグインを作成することがあります。
Unity 2019 で WebGL 上でファイルダイアログを扱うプロジェクトがあったのですが、
先日 Unity 2020 にアップデートしてビルドしたところ、ブラウザ（Google Chrome）上で以下のようなエラーが出ました。
今回はその対処について共有しようと思います。
※JavaScript について詳しくないため、間違いなどあるかもしれませんがご了承ください。
TypeError: Cannot read property 'addEventListener' of null at [関数名]
バージョン
Unity 2020.3.13f1
前提
WebGL でファイルダイアログを扱う方法として、以下の記事の FileImporter.jslib を
参考にさせていただいていました。
UnityのWebGL出力でHTMLのファイル選択ダイアログを表示して外部ファイルを読み込む
エラー内容と原因
TypeError: Cannot read property 'addEventListener' of null at [関数名]
FileImporter.jslib の中で addEventListener を使っているのは一か所、 document.getElementById('#canvas') の後のみです。
どうやら ID: #canvas で Canvas を取得することができなくなったみたいです…。
おそらく Unity 2020 以降 WebGL ビルドファイルの出力形式が変更されたことに伴うものと思われます。
ビルド出力の index.html を覗くと、
ということで #canvas ではなく unity-canvas という ID が付与されるようになったようです。
また、少し下に
であらかじめ取得してくれているので、getElementById を使わずとも変数 canvas として直接アクセスできそうです。
対処
ということで、FileImporter.jslib 内の 2 箇所
document.getElementById('#canvas').removeEventListener('click', OpenFileDialog);
document.getElementById('#canvas').addEventListener('click', OpenFileDialog, false);
を、
document.getElementById('unity-canvas').removeEventListener('click', OpenFileDialog);
document.getElementById('unity-canvas').addEventListener('click', OpenFileDialog, false);
もしくは、
canvas.removeEventListener('click', OpenFileDialog);
canvas.addEventListener('click', OpenFileDialog, false);
に書き換えて動作するようになりました。