@freewith_imamuraposted at 2024-09-13

ブラウザからfirebaseへのデータの書き込みができません。

Q&A

ブラウザからfirebaseへのデータの書き込みができません。

ローカル環境でブラウザからcloud firestoreへのデータの書き込みができません。firebase.jsというファイルを作っており、そのファイルの中にAPIに必要なfirebaseConfigとファイルが実行されると、あるオブジェクトがfirestoreに書き込まれるというものすごく簡単なプログラムになっています。
それでそのファイルをreactで動かしていて、index.htmlにscriptタグを埋め込んでいる(typeをモジュールに設定している)のでreactが起動したらすぐオブジェクトがfirestoreに書き込まれるはずなのですが、記載のエラーが出てしまいどうしたらいいかわかりません。

どなたかご教授願います。

発生している問題・エラー

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

該当するソースコード

<script type="module" src="../src/firebase.js"></script>

自分で試したこと

.htaccessファイルを作成してMIMEタイプを記入してみましたが、効果ありませんでした。

2Answer

@uasi posted at 2024-09-13

.htaccess の記法が間違っているかファイルを置く場所が違う、またはそもそも Apache ではないローカルサーバを使っていて .htaccess が読み込まれていないことが考えられます。 .htaccess の内容を質問に追記してください。またローカルサーバを起動した手順も書いてください。

0Like

Comments

@freewith_imamura
Questioner
ご回答をありがとうございます。
ローカルサーバーを起動した手順としては、reactの環境を構築した上でnpm startを実行しました。そしてブラウザからhttp://localhost:3000へアクセスしています。

以下は.htaccessの記述内容です。

@zuisho-1848 posted at 2024-09-27

このエラーで一番注目すべきは
but the server responded with a MIME type of "text/html"
の部分です。JSのはずがHTMLが返ってきている。
これは、パスを間違えて404になった時に、HTMLが返ってしまうというケースでよく見掛けられるエラーです。

src/ 以下のJSはReactのページにあたるJS（JSX）で、Reactのページからはimportすれば呼び出せますが、HTMLのscriptタグなどでURLを介しては呼び出せません。

URLで呼び出したいファイルはpublic/以下におきましょう。

今回のケースでは、public/js/firabease.js に配置して、

<script type="module" src="/js/firebase.js"></script>

のように呼び出せば、おそらくうまく呼び出せると思います。

0Like

Are you sure you want to delete the question?

ブラウザからfirebaseへのデータの書き込みができません。