I am a beginner with html and js. I have the following error when I try to signup a new user. None of the issues found on the internet helped me to find the solution:
Uncaught TypeError: Cannot read property 'close' of undefined
at auth.js:22
at r.g (auth.js:19)
at Dt (auth.js:22)
at Ct (auth.js:22)
at mt.t.Ub (auth.js:21)
at vt (auth.js:15)
Here is the index.html:
<html>
<head>
<title> First test </title>
<!-- Load library: The core Firebase JS SDK is always required and must be listed first -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css">
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<!-- Load library: Add additional services you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-firestore.js"></script>
<!-- Load library: Authentification -->
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-auth.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
var firebaseConfig = {
apiKey: "**********",
authDomain: "**********",
databaseURL: "************",
projectId: "**********",
storageBucket: "****************",
messagingSenderId: "**********"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var firestore = firebase.firestore();
firestore.settings({
timestampsInSnapshots: true
});
const auth = firebase.auth();
</script>
</head>
<!-- Authentificate a new user -->
<div id="modal-signup" , class='modal'>
<div class='modal-content'>
<h4> Sign Up </h4><br />
<form id='signup-user'>
<div class='input-field'>
<input type='email' id="signup-email" />
<label for='signup-email'> email adress </label>
</div>
<div class='input-field'>
<input type='password' id="signup-password" />
<label for='signup-password'> password </label>
</div>
<button id='signup-button' type='submit'>sign up</button>
</form>
</div>
</div>
<script src='./auth.js'></script>
</html>
<!-- <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-storage.js"></script> -->
And the auth.js script
// values from the firebase console
const signupForm = document.querySelector('#signup-user');
// Sign up function
signupForm.addEventListener("submit", (e) => {
e.preventDefault(); // avoid the page to refresh when we click signup
// get user info from the id of the input
const email = signupForm['signup-email'].value;
const password = signupForm['signup-password'].value;
auth.createUserWithEmailAndPassword(email, password).then( cred => {
console.log(cred);
const modal = document.querySelector('#modal-signup');
console.log(modal)
M.Modal.getInstance(modal).close();
signupForm.reset();
// div id
});
});
I think the problem comes from the line M.Modal.getInstance(modal).close();. It looks like modal is not defined. However, when I log it with console.log, the variable modal is existing.