Gatsby.js + A-FrameでSSGしつつ3Dオブジェクトをレンダリングしてみる その3

mayatasomayataso

これ(https://coneta.jp/article/show/2997)の続き。

6. デプロイしてみる

適当なサーバを用意してデプロイしてみる。

方法は簡単で、build時にpublic/の中に色々アウトプットされるので丸ごとWebサーバに配置する。

すると、A-Frame自体は動作するが動画ファイルが読み込まれず、読み込み中のまま。

production-app.js:170 page resources for /subDir/ not found. Not rendering React

Uncaught (in promise) TypeError: l[e] is not a constructor
    at HTMLElement.value (aframe-master.js:71943)
    at HTMLElement.value (aframe-master.js:71922)
    at HTMLElement.value (aframe-master.js:71882)
    at HTMLElement.value (aframe-master.js:70372)
    ...

といったエラーが表示される。

正直良くわからなかったが、サブディレクトリにデプロイしてる関連のエラーではなくやはりA-Frameの読み込み不良と解釈。

散々悩んだ結果、以下で解決した。

解決手順

  1. npm install @mui/material でMaterial UIをインストール
  2. import { NoSsr } from "@mui/base" して、該当のA-Frame要素部をで囲む

これで解決。
NoSsrで囲った部分はサーバサイドではレンダリングされない。

フロントでのレンダリングでエラーになってて、なぜこの対応で解決するのかは分からないが、一旦Webサーバで問題なくA-Frameを使えるようになった。

エラーの根本的な原因解明は、Gatsbyのレンダリングシステムをちゃんと理解しないと分からないかな。。