我是编程新手，不知道这里的问题。这是HTML文件。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<title>GameGuidez</title>
</head>
<body class="grey lighten-3">
<!-- NAVBAR -->
<nav class="z-depth-0 grey lighten-4">
<div class="nav-wrapper container">
<a href="#" class="brand-logo">
<img src="img/logo.svg" style="width: 180px; margin-top: 10px;">
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="logged-in">
<a href="#" class="grey-text modal-trigger" data-target="modal-account">Account</a>
</li>
<li class="logged-in">
<a href="#" class="grey-text" id="logout">Logout</a>
</li>
<li class="logged-in">
<a href="#" class="grey-text modal-trigger" data-target="modal-create">Create Guide</a>
</li>
<li class="logged-out">
<a href="#" class="grey-text modal-trigger" data-target="modal-login">Login</a>
</li>
<li class="logged-out">
<a href="#" class="grey-text modal-trigger" data-target="modal-signup">Sign up</a>
</li>
</span>
</ul>
</div>
</nav>
<!-- SIGN UP MODAL -->
<div id="modal-signup" class="modal">
<div class="modal-content">
<h4>Sign up</h4><br />
<form id="signup-form">
<div class="input-field">
<input type="email" id="signup-email" required />
<label for="signup-email">Email address</label>
</div>
<div class="input-field">
<input type="password" id="signup-password" required />
<label for="signup-password">Choose password</label>
</div>
<button class="btn yellow darken-2 z-depth-0">Sign up</button>
</form>
</div>
</div>
<!-- LOGIN MODAL -->
<div id="modal-login" class="modal">
<div class="modal-content">
<h4>Login</h4><br />
<form id="login-form">
<div class="input-field">
<input type="email" id="login-email" required />
<label for="login-email">Email address</label>
</div>
<div class="input-field">
<input type="password" id="login-password" required />
<label for="login-password">Your password</label>
</div>
<button class="btn yellow darken-2 z-depth-0">Login</button>
</form>
</div>
</div>
<!-- ACCOUNT MODAL -->
<div id="modal-account" class="modal">
<div class="modal-content center-align">
<h4>Account details</h4><br />
<div class="account-details"></div>
</div>
</div>
<!-- CREATE GUIDE MODAL -->
<div id="modal-create" class="modal">
<div class="modal-content">
<h4>Create Guide</h4><br />
<form id="create-form">
<div class="input-field">
<input type="text" id="title" required>
<label for="title">Guide Title</label>
</div>
<div class="input-field">
<textarea id="content" class="materialize-textarea" required></textarea>
<label for="content">Guide Content</label>
</div>
<button class="btn yellow darken-2 z-depth-0">Create</button>
</form>
</div>
</div>
<!-- GUIDE LIST -->
<div class="container" style="margin-top: 40px;">
<ul class="collapsible z-depth-0 guides" style="border: none;">
<li>
<div class="collapsible-header grey lighten-4">Guide title</div>
<div class="collapsible-body white">Lorem ipsum dolor sit amet.</div>
</li>
<li>
<div class="collapsible-header grey lighten-4">Guide title</div>
<div class="collapsible-body white"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header grey lighten-4">Guide title</div>
<div class="collapsible-body white"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header grey lighten-4">Guide title</div>
<div class="collapsible-body white"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>
</div>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-analytics.js";
import { getFirestore, collection, getDocs } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-firestore.js";
import { getAuth } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-auth.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
const firebaseConfig = {
apiKey: "AIzaSyDtOHhUSTmYbFkuWvy-WNPU3v_-zMcwD3Y",
authDomain: "rule-95158.firebaseapp.com",
databaseURL: "https://rule-95158-default-rtdb.firebaseio.com",
projectId: "rule-95158",
storageBucket: "rule-95158.appspot.com",
messagingSenderId: "840685446092",
appId: "1:840685446092:web:7857f9d2aab144e9807369",
measurementId: "G-L4PSF64BQL"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const auth = firebase.auth();
const db = firebase.firestore();
db.settings({timestampsInSnapshots: true});
</script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="scripts/auth.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
这是auth.js文件
const signupForm = document.querySelector('#signup-form');
signupForm.addEventListener('submit', (e)=>{
e.preventDefault();
const email = signupForm['signup-email'].value;
const password = signupForm['signup-password'].value;
console.log(email, password);
auth.createUserWithEmailAndPassword(email, password).then(cred=>{
console.log(cred)
})
})
可以看到，auth.createUserWithEmailAndPassword在控制台中显示auth未定义的错误。我认为问题是const auth= firebase.auth();不是一个函数，但我无法得到初始化这个auth的方法。有人能帮我吗?这也是我的第一个网络项目，我对网络开发很陌生。所有的代码都来自youtube的网络忍者，所以所有的代码都是他们的。我认为我导入firebase错误，因为文档与视频不同，但无论如何，请帮助我。
您包含了Firebase SDK的v9版本，并从中导入了顶级函数。这意味着您还必须使用v9语法来调用API，即:
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)...
我强烈建议在开发过程中随时使用Firebase文档，因为这几乎等同于文档中创建基于密码的帐户的示例。