ReactをGithub Pagesで動作させたい

Question

実現したいこと

https://github.com/Hyuto/yolov5-tfjs
このコードを自分のGithub Pagesで動作させたいです。
最終的にはコードを改良して動作させるつもりですが、一旦そのままで試しています。

発生している問題・エラーメッセージ

Githubからローカルに持ってきて、ローカルでnpm等を使って実行すると正常に動作します。
その後、自分のリポジトリにpush(?)してGithub Pagesにアクセスすると画面には何も出ません。コンソールを確認するとエラーが出ています。

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec.
index.jsx:1

自分なりに調べましたがGithub Pagesに詳しくなく、Reactも触ったことがないため躓いている状況です。
些細なことでも構いませんのでどなたか原因やアドバイス等を頂けたら幸いです。

Answer 1

https://www.sukerou.com/2022/03/github-pages-react.html
こちら参考になりませんでしょうか、試してみてください。

Comments

[beginner5269]

ありがとうございます。
そのサイトの通りに進めるとおそらくpublicフォルダ内がアップロードされる形になると思うのですが、
https://github.com/Hyuto/yolov5-tfjs
このリポジトリだと、index.htmlがpublicフォルダと同じ階層に置いてあり、npm run deployを実行したところindex.htmlが見つからない旨のエラーになります。対策等ありますでしょうか？

[yama_u]

package.jsonの
"homepage": "https://github.com/Hyuto/yolov5-tfjs#readme",
を
"homepage": "."
としてみたらどうですか？

[beginner5269]

変わらず同じエラーでした。リポジトリ名はtestです。
npm run deploy

yolov5-tfjs@1.0.0 deploy
> npm run build && gh-pages -d build

> yolov5-tfjs@1.0.0 build
> cross-env PUBLIC_URL=/test react-scripts build

Could not find a required file.
Name: index.html
Searched in: C:\Users\ユーザー名\Desktop\yolov5-tfjs\public

[yama_u]

すいません、正しい解決法なのかわかりませんが、応急措置として、publicフォルダにindex.htmlを含めてしまうのはどうでしょうか。index.html内のscriptのパスは変更する必要があると思いますが。

[beginner5269]

scriptのパスが分かりません。"../src/index.jsx"では動きませんでした。Githubのリポジトリにはpublic内のファイルしかアップロードされないため、srcフォルダがなく指定できないのでしょうか。

[yama_u]

さきほどのpackage.jsonのhomepageの値を
"homepage": "./",
としてみて下さい

[beginner5269]

スマホから接続するとカメラ関連がちゃんと動いていませんがPCからだと動きました。スマホの方は自分で何とかしようと思います。長時間ありがとうございました！本当に助かりました！

[yama_u]

よかったです！
ちなみに、最終的にはどこを修正してPCで動作したのでしょうか？

[beginner5269]

package.jsonのhomepageを"./"に変えたら動きました。
ただindex.jsxは404のままで、index.htmlのscriptタグをコメントアウトしても動いたのでよく分かりませんでした。index.jsxをフォルダから抜いてみるとindex.jsが見つからない旨のエラーが出て実行できなかったのでどこか別のところで必要みたいです。