Q&A
Firebase Hosting (ですよね？) よく分かりませんが、Firestore にサーバーからアクセスしたいのか、クライアント (ブラウザ) からアクセスしたいのかによるような…。
JavaScriptの初心者です。
firebaseの機能（firestore）をjavascriptのソースから使用したいのですが、firebase機能のinitializeApp()メソッドの呼び出しでエラーが出ています。エラーが出ている原因と対策を教えていただきたいです。
[フォルダ構成]
```ここに言語を入力
package.json
firebase.json
「public」
- index.html
- 「js」
- config.js
firebase deploy にてデプロイに成功し表示されたURL（Hosting URL: https://・・・）にchromeブラウザにてアクセスし、 表示された画面にて右クリック→「検証」をクリック 上メニューの「コンソール」選択 →コンソール上に以下のエラーが表示される。 ```ここに言語を入力 "Uncaught ReferenceError: initializeApp is not defined at config.js:16"
・エラー出ている16行目は、以下のソースのinitializeApp()の箇所を指します。
・firebaseConfig内の各要素は、firebaseのコンソール(https://console.firebase.google.com/)で使用したいFirebaseプロジェクトを選択し、左上に表示される"</>"のネジアイコンをクリック。”SDK の設定と構成”にてラジオボタンで"npm"が選択されている際に表示されるコードをそのままコピーして使用しています。
・以下1行目・2行目でコメントアウトしているimport文のコメントアウトを解除すると、import文でエラーが出てしまいます。
public/js/config.js
config.js
1// import { initializeApp } from 'firebase/app'; 2// import { getFirestore, collection, getDocs } from 'firebase/firestore/lite'; 3 4const firebaseConfig = { 5 apiKey: "------", 6 authDomain: "------", 7 databaseURL: "------", 8 projectId: "------", 9 storageBucket: "------", 10 messagingSenderId: "------", 11 appId: "------", 12 measurementId: "------" 13}; 14 15// Initialize Firebase 16const app = initializeApp(firebaseConfig);
public/package.json
json
1{ 2 "name": "chat-app", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "author": "", 10 "license": "ISC", 11 "dependencies": { 12 "firebase": "^9.6.1" 13 } 14} 15
public/firebase.json
json
1{ 2 "hosting": { 3 "public": "public", 4 "ignore": [ 5 "firebase.json", 6 "**/.*", 7 "**/node_modules/**" 8 ], 9 "rewrites": [ 10 { 11 "source": "**", 12 "destination": "/index.html" 13 } 14 ] 15 } 16}
node -v v16.13.1 npm -v 8.3.0
他に試した事としては、config.jsにてinitializeApp()メソッドを呼ぶことをやめて
index.htmlの<body>タグ内にてfirebase機能のjsファイルをimportする処理およびinitializeApp()メソッドを呼ぶことをやってみましたが、やはりinitializeApp()メソッドを呼ぶ箇所でエラーが出ました。
Uncaught ReferenceError: initializeApp is not defined at (インデックス):26
public/index.html
html
1<!DOCTYPE html> 2<html> 3 <body> 4 <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script> 5 <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script> 6 <script src="/js/config.js"></script> 7 8 <script> 9 // Initialize Firebase 10 const app = initializeApp(firebaseConfig); 11 </script> 12 13 </body> 14</html>
有識者の方、すみませんがどうぞよろしくお願いいたします。
回答1件
0
自己解決
config.js側のエラーの解決はできていませんが、index.html側のソースを以下に修正すると"Uncaught ReferenceError: initializeApp is not defined"のエラーは消えました。
public/index.html
html
1 <script> 2 // Initialize Firebase 3 const app = firebase.initializeApp(firebaseConfig);
投稿2021/12/26 23:13
総合スコア18
あなたの回答
tips
プレビュー
