Firebase/firestoreのファイル間のエクスポート・インポートがうまくいかない
解決したいこと
firestoreの認証情報をhtmlからJavascriptに移動したい。
javascriptとhtmlのエクスポートとインポートがうまくいかない。
htmlではテストで問題なく動いたTODOアプリです。
実行環境はgoogle chromeです。
これまでhtmlにまとめて書いていた、firebaseの認証情報を隠すべく、Javascriptファイルに認証情報を移しました。
javascriptとhtmlのエクスポートとインポートがうまくいかない、アプリが動作しません。
どうにか動作させたいため、お知恵を拝借したいです。
発生している問題・エラー
■現時点でエラーが３つ出ています。
import {db} from "fbConf.js";
に対して
Uncaught SyntaxError: Cannot use import statement outside a module
＜!DOCTYPE html＞（<を大文字にしてます）
に対して
Access to script at
'file:///C:/Users/【ファイル名】.js'
from origin 'null' has been blocked by CORS policy
: Cross origin requests are only supported for protocol schemes
: http, data, chrome, chrome-extension, chrome-untrusted, https.
＜script src="fbConf.js" type="module">（<を大文字にしてます）
に対して
GET file:///C:/Users/【ファイル名】.js net::ERR_FAILED
というエラーがでてhtmlは表示されますが、実行されません。
ファイルはフォルダ直下に
fbConf.js
firebase-test.html
という２ファイルだけです。
該当するソースコード
fbConf.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
//export const analytics = getAnalytics(app);
export const db = getFirestore(app);
firebase-test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Firestore-test</h1>
Document名<input type="text" id="document">
内容<input type="text" id="content">
<button onclick="add()">追加</button>
<button onclick="getData()">読み取り</button>
<button onclick="add()">更新</button>
<button onclick="deleteData()">削除</button><br>
<!--firebaseの設定はじまり-->
<script src="fbConf.js" type="module"></script>
<script>
import {db} from "fbConf.js";
//ここまでfirebaseの設定
//追加・更新機能（set) 更新はドキュメント名を指定してコンテンツを更新
// 定例句：db.collection('DB名はここで指定').doc(documentData);
//ドキュメントはIDのこと。.docでID指定をできる※指定しないと勝手に降られる
const add = async () => {
const contentData = document.getElementById('content').value;
const documentData = document.getElementById('document').value;
const docRef = db.collection('Users').doc(documentData);
//docref(ドキュメントデータ)にコンテンツ（コンテンツデータ）を入れる。
await docRef.set({
content: contentData
});
}
//読み取り機能(get)&for each
//docはIDのこと。コンソールログでdoc.id=docのID表示。doc.data=中身（コンテンツを表示）
const getData = async () => {
const snapshot = await db.collection('Users').get();
snapshot.forEach((doc) => {
console.log(doc.id, '=>', doc.data());
});
}
// 削除用のメソッド(delete) ドキュメント名(ID)を指定して削除
//docでID指定。IDのvalueが合うものを削除。
const deleteData = async () => {
const documentData = document.getElementById('document').value;
await db.collection('Users').doc(documentData).delete();
}
</script>
</body>
</html>
様々な方の情報を拝見しましたが、現在のこの状態が一番エラーが少ないです。
以上どうぞよろしくお願いいたします。
1