Firebaseのimport エラーについて

Question

###firebase import エラーについて

firebaseを用いて、google認証機能をつけたチャットアプリを作成中です。
そのアプリ内にルート検索機能もつけていて、APIはmicrosoftの Bing mapsを使用しています。
チャットメッセージ送信時に、現在地を取得し、チャットのメッセージ、送信者、現在地をfirebaseに保存するよう設定しました。

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

上記、firebaseへの保存は全く問題なく実行されていますが、firebaseへの保存が出来るようになると、Bing mapsが表示されなくなり、ルート検索も出来なくなったので困っています。

エラーメッセージ
It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the CDN builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

https://www.gstatic.com/firebasejs/5.0.0/firebase-<PACKAGE>.js

試したこと

Quiitaなどで調べた所、importの部分を書き換えれば良いと記載されていますが、そもそもどこにimportがあるか探せず・・・
コードを何回も見返しているのですが、どこを訂正すれば良いかわからず困っています。
初歩的な質問で申し訳ございませんが、教えて頂ければ幸いです。よろしくお願いします。

###正しい場所かどうかわかりませんが、以下問題がある可能性があるコードです。

<!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries -->

firebase.initializeApp(firebaseConfig);
const newPostRef=firebase.database().ref();

// 送信アクション
function GetMap(){
const map = new Bmap("#myMap");
map.geolocation(function(data) {
//location
const lat = data.coords.latitude;
const lon = data.coords.longitude;
console.log(lat);
console.log(lon);
})};
$("#send").on("click",function(){
GetMap()
const map = new Bmap("#myMap");map.geolocation(function(data) {
const lat = data.coords.latitude;
const lon = data.coords.longitude;
console.log(lat);
console.log(lon);
newPostRef.push({
username:$("#name option:selected").text(),
text:$("#text").val(),
text:$("#text").val()+"<br>"+ (today_time+"に送信"),
place:(lat,lon),
})
});
});
// 受信
newPostRef.on("child_added",function(data){
// データ取得
const d=data.val();
// key名
const k=data.key;
// 表示
if(d.username=="Aさん"){
let str="<div id=asan>"+"<h2>"+d.username+"</h2>"+d.text+"</div>";
$("#output").append(str);
送信者の名前をセレクターで選べるようにして、送信者ごとに背景などを変えたいのでif分で表示のアクションも分けています。

Comments

[YukiSaegusa]

コードもつけていただきたいです

[CCHH]

ご質問ありがとうございます。どこのコードを付ければよろしいでしょうか？どこもエラーが出ていないので、どの部分を付ければ良いかもわからず・・・初心者で至らない点が多く申し訳ございません。

[YukiSaegusa]

現在importをしているfileを見せていただきたいです

[CCHH]

importしているファイルというのは、firebaseに保存するデータでしょうか？

[YukiSaegusa]

上記のエラーが発生したと思われる、CCHHさんが書いたコードが見たいです。
そもそもそのエラーがでたコードというのはご自身で書かれたものでしょうか？それともライブラリか何かの中で発生しているエラーですか？

[CCHH]

問題が発生していると思われるコードを載せてみました。場所が間違っていたらすいません。ライブラリーは使用していので、自分で書いたものです。素人のコードで本当に恐縮です。

[YukiSaegusa]

ありがとうございます！
他に、firebaseを使っている部分はないですかね？

[CCHH]

firebaseに保存しているのは上記
username:$("#name option:selected").text(),
text:$("#text").val(),
text:$("#text").val()+"<br>"+ (today_time+"に送信"),
place:(lat,lon),
だけです。
firebaseとは別でBing mapのルート検索もありますが、こちらのルート検索機能はfirebaseとは関係ありません。現在地の取得だけ上記のように利用しています。

[YukiSaegusa]

そのnewPostRefはどのように定義しているのですか？

[YukiSaegusa]

そこでfirebaseの何らかをimportしていると思うのですが

[CCHH]

const newPostRef=firebase.database().ref();　と定義しています。
上記追加しました。

[YukiSaegusa]

ありがとうございます。
そこのfirebaseを定義している部分が問題だと思います。
import firebase from 'firebase'
または
var firebase = reqire ('firebase')
のような記述はありませんか？
一番上に書いてあると思います

[CCHH]

教えて頂いたような記述は見当たりません。
firebase.initializeApp(firebaseConfig);
これはまた別でしょうか？
const newPostRefの上に記載があります。

[CCHH]

firebase.initializeApp(firebaseConfig);の上には、apiKey、 authDomain、databaseURL、 projectId、
storageBucket、messagingSenderId、appIdが記載されています。

[YukiSaegusa]

それともまた別です。
firebaseを用いている時点で、その変数はどこかで宣言しているはずです。(宣言していなかったら、firebase is undefinedのエラーが出るはず)
では、firebaseで全体検索をかけて見てください。大抵のエディタには検索機能がついていると思います。

[CCHH]

コードを記載しているファイル全体に"firebase"で検索をかけてみた結果、
上記
const newPostRef=firebase.database().ref();
firebase.initializeApp(firebaseConfig);
以外では、
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
でした。
コードに追加します。

[YukiSaegusa]

ありがとうございます。
では、そのコードを
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-database.js"></script>
に変えて見てください。

[CCHH]

今変えてみましたが、エラーが３点出ました。
1. html内にある、firebase.initializeApp(firebaseConfig)が Uncaught ReferenceError: firebase is not defined

[CCHH]

2.index.ts:55 TypeError: Cannot read property 'SDK_VERSION' of undefined
3.index.ts:55 Uncaught Error: Cannot instantiate firebase-database - be sure to load firebase-app.js first.

[CCHH]

何度も本当に申し訳ございません。結構ご負担になってきていると思います。お手数でしたら大丈夫です・・・予想以上に大変ですね・・・

[YukiSaegusa]

<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-database.js"></script>
の上に
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
を付け加えて見てください

[YukiSaegusa]

エラー内容をよく読んで、書いてあるurlには一度とんで読むことは大切です。
今回であれば
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
とあるので、このurlにとんで、読んで見ましょう。大体は解決法が書いてあります。

[CCHH]

ご返答ありがとうございます！！承知しました。もう少し読んで探してみます！
ありがとうございます！！

Answer 1

私がエラーメッセージだと思っていた上記エラーメッセージはそもそも今回の問題には関係なく、上記Getmapを２回繰り返している事が問題でした。
実際は位置情報取得及びルート検索のため、さらにこの上にもう１つGetmapを記載しています。同じファイル内でなんどもGetmapを繰り返し、Getmapがぐるぐる回っているようになっていたので、やりたい事ができなかったみたいです。
上記コードの最初のGetmapを消してみると出来ました。

親身に相談に乗って頂いた方には本当に感謝しています。
私もいつかここで困っている方を助けられるくらい、技術を身に付けたいです！！