我正在将 Firebase 9.6.2 配置到我的 web 应用程序 JavaScript 但出现很多阻止此操作的错误，错误和代码如下

Question

代码如下

WHERE ERROR：{“消息”：“未捕获的 ReferenceError：未定义初始化应用程序”，“文件名”：“https://stacksnippets.net/js”，“lineno”：242，“colno”：15 }

我需要在 2022 年使用最新版本的 firebase 配置此应用程序，这一直是个问题，有什么解决办法吗？ 尝试将所有 Javascript 放在一个地方，但仍然出现多个错误。

 /*import {initializeApp} from 'firebase/app'; const firebaseApp = initializeApp({ apiKey: "AIzaSyAtzy40xFuSImG9HgnZ_wwrvFXZv3T40Pc", authDomain: "tiprock-c4967.firebaseapp.com", databaseURL: "https://tiprock-c4967.firebaseio.com", projectId: "tiprock-c4967", storageBucket: "tiprock-c4967.appspot.com", messagingSenderId: "103862559440", appId: "1:103862559440:web:8e5636b52cb4516680f4d5", measurementId: "G-S4Q531K4HR" }); */ const firebaseConfig = { apiKey: "AIzaSyAtzy40xFuSImG9HgnZ_wwrvFXZv3T40Pc", authDomain: "tiprock-c4967.firebaseapp.com", databaseURL: "https://tiprock-c4967.firebaseio.com", projectId: "tiprock-c4967", storageBucket: "tiprock-c4967.appspot.com", messagingSenderId: "103862559440", appId: "1:103862559440:web:8e5636b52cb4516680f4d5", measurementId: "G-S4Q531K4HR" }; // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); //Reference messages var message= firebase.database().ref('messages'); //Listen for a submittion from the form document.getElementById('postcreation').addEventListener('submit', submitForm); function submitForm(e){ e.preventDefault(); console.log('Submission is working'); //gET VALUES var title = getInput('title'); var time = getInput('time'); var author = getInput('author'); var content = getInput('content'); //test if the function below works //console.log(title); //Calling our data saveMessages(title, time, author, content); //Confirm saving and submission } //Function to fetch form values function getInput(id){ return document.getElementById(id).value; } //Save msgs to firebse function saveMessages(title, time, author, message){ var newMessageRef = message.push(); newMessageRef.set({ title:title, time:time, author:author, content:content }) }

 @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@100;400&family=Montserrat+Alternates:wght@100;200&family=Roboto:wght@100&family=The+Nautigal:wght@400;700&display=swap'); *{ margin: 0; } /*Different sizes*/ /*font-family: 'Be Vietnam Pro', sans-serif; font-family: 'Montserrat Alternates', sans-serif; font-family: 'Roboto', sans-serif; font-family: 'The Nautigal', cursive;*/ body{ font-size: 18px; overflow-x: hidden; }.header-cont{ width: 100%; height: 120px; background: #000; }.header-cont>h1{ font-family: 'The Nautigal', cursive; font-size: 60px; font-weight: 800; color: #fff; transform: translateX(10%); }.header-cont>ul>li{ display: inline-block; font-size: 18px; color: #f4f4f4; margin: 10px; font-family: 'Montserrat Alternates', sans-serif; cursor: pointer; border: none; }.header-cont>ul{ transform: translateX(10%); margin: 5px; } /*Blog main container*/.post-maincont{ width:70%; border: none; border-left: 3px solid #11bb7a; box-shadow: 0px 2px 3px 0px #ccc; margin-top: 20px; margin-bottom: 20px; transform: translateX(10%); }.post{ margin: 15px; }.post>h3{ font-size: 22px; font-family: 'Be Vietnam Pro', sans-serif; color: rgb(71, 70, 70); margin: 10px; }.date{ margin: 10px; width: 20%; font-size: 14px; font-family: 'Roboto', sans-serif; color:#fff; font-weight: bold; padding: 5px; background: rgb(73, 206, 133); border-radius: 25px; }.post>p{ margin: 10px; font-size: 16px; font-family: 'Roboto', sans-serif; color:rgb(44, 44, 44); font-weight: 700; }.formHeading{ font-size: 50px; font-family: 'The Nautigal', cursive; font-weight: 600; transform: translateX(10%); } form{ margin: 40px; width: 70%; border: none; border-radius: 25px; transform: translateX(20%); }.textP{ margin: 20px; padding: 10px 20px; height: 80px; box-shadow: 0px 2px 4px 0px #ccc; }.textP>label{ display: block; margin-bottom: 5px; font-family: 'Montserrat Alternates', sans-serif; color: rgb(49, 49, 4); font-size: 20px; font-weight: 600; }.textP>input{ border: none; border-bottom:1px solid rgb(182, 182, 182); padding: 10px 20px; width: 50%; font-family: 'Montserrat Alternates', sans-serif; font-size: 16px; } input{ outline: none; } button{ padding: 10px 20px; border: none; border-radius: 20px; background: #11bb7a; color: #fff; font-family: 'Montserrat Alternates', sans-serif; font-weight: 600; font-size: 16px; cursor: pointer; } button:hover{ background: #10ac70; }

 <,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"> <link rel="stylesheet" href="index,css"> <title>blog test</title> </head> <body> <div class="header-cont"> <h1>Tech Spot</h1> <ul class="list"> <li>Home</li> <li>Services</li> <li>Downloads</li> <li>Reach Us</li> </ul> </div> <.--Blog posts--> <div class="post-maincont"> <div class="post"> <h3>Oragon Contest</h3> <div class="date">Thursday: 7,18 pm</div> <p class="author">Author. Peter Jeans</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit, Beatae voluptates totam nisi dolore deserunt eveniet aut maiores. natus qui recusandae. Lorem ipsum dolor sit. amet consectetur adipisicing elit. Voluptatum voluptatibus placeat a consectetur libero rem nobis. </p> </div> </div> <.--Make post form--> <hr> <br> <h2 class="formHeading">Make Your Post</h2> <form action="" id="postcreation"> <div class="textP"> <label for="title">Title</label> <input type="text" name="title" id="title" placeholder="Put title here.,."> </div> <div class="textP"> <label for="time">Time and date</label> <input type="text" name="time" id="time" placeholder="eg Tue. 4.30 am"> </div> <div class="textP"> <label for="author">Author</label> <input type="text" name="author" id="author" placeholder="eg: James Blake"> </div> <div class="textP"> <label for="content">Content</label> <input type="text" name="content" id="content" placeholder="Write here..."> </div> <div class="button"><button type="submit">Post</button></div> </form> <.--Javascript linked--> <script type="module"> // Import the functions you need from the SDKs you need import { initializeApp } from "https.//www;gstatic:com/firebasejs/9.6.2/firebase-app.js". import { getAnalytics } from "https.//www;gstatic:com/firebasejs/9:6.2/firebase-analytics.js". // TODO. Add SDKs for Firebase products that you want to use // 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 </script> <script src="index.js"></script> </body> </html>

Answer 1

好像你还没有安装firebase npm package 你可以通过运行以下命令来安装它

npm install firebase

或者如果您不想使用 npm 或 nodejs 只需 go 和 firebase cdn URL

从以下文档中提取

Do you use ESM and want to use browser modules? Replace all your import lines to use the following pattern:
import { } from 'https://www.gstatic.com/firebasejs/9.6.2/firebase-SERVICE.js'
(where SERVICE is an SDK name such as firebase-firestore).
Using browser modules is a quick way to get started, but we recommend using a module bundler for production.