How to solve 'Uncaught SyntaxError: Unexpected reserved word (at index.html:93:36)' in Firebase?

Question

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!--<link href="index.css" rel="stylesheet" />-->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <!--<script src="./src/index.js"></script>-->

        <title>DB Test</title>
    </head>
    <body>
        <a><h1>DB Test</h1></a>

        <div class="input-box">
            <input id="email" type="text" name="username" placeholder="email">
            <label for="email">Email</label>
        </div>

        <div class="input-box">
            <input id="password" type="password" name="password" placeholder="pw">
            <label for="password">password</label>
        </div>

        <div class="input-box">
            <input id="loc" type="text" name="loc" placeholder="loc">
            <label for="loc">location</label>
        </div>

        <div class="input-box">
            <input id="phone_num" type="text" name="phone_num" placeholder="phone_num">
            <label for="phone_num">phone_num</label>
        </div>

        <div class="input-box">
            <input id="JMT" type="text" name="JMT" placeholder="JMT">
            <label for="JMT">JMT</label>
        </div>

        <input type="button" id="button" value="submit" onclick="newuser();">

        <script type="module">
            // Import the functions you need from the SDKs you need
            import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
            import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-auth.js";
            //import { getFirestore, collection, getDocs, addDoc } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-firestore.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
            const firebaseConfig = {
                ...
            };

            // Initialize Firebase
            const app = initializeApp(firebaseConfig);
            const auth = getAuth();
            const loc = document.getElementById('loc').value;
            const phone_num = document.getElementById('phone_num').value;
            var JMT = document.getElementById('JMT').value.split(",");
            var JMT_map = new Map();
            
            for (var i = 0; i < JMT.length; i++){
                JMT_map.set(JMT[i], 1)
            }

            window.newuser = () => {
                const email = document.getElementById('email').value;
                const password = document.getElementById('password').value;
                console.log(password)
                createUserWithEmailAndPassword(auth, email, password)
                .then((userCredential) => {
                // Signed in
                const user = userCredential.user;
                    alert("Success")
                    location.replace('./test.html')
                })
                .catch((error) => {
                    const errorCode = error.code;
                    const errorMessage = error.message;
                    alert("Error")
                })

                try {
                    *const docRef = await addDoc(collection(db, "users")*, {
                      phone: phone_num,
                      position: loc,
                      JMT: JMT_map
                    });
                    console.log("Document written with ID: ", docRef.id);
                  } catch (e) {
                    console.error("Error adding document: ", e);
                  }
            }
        </script>
    </body>
</html>

I use firebase now,and I want to make 'newuser' function work for authentication and add new data in firestore database. But 'Uncaught SyntaxError: Unexpected reserved word (at index.html:93:36)' occurs now, and 'index.html:42 Uncaught ReferenceError: newuser is not defined at HTMLInputElement.onclick' occurs. How to solve this problem?

Answer 1

The following should do the trick. As explained in my comment above, you need to chain the different Firebase asynchronous method calls (which return a Promise). (This technique is absolutely KEY when working with Firebase. I would kindly suggest you go through the documentation on Promises and chaining).

    window.newuser = () => {
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;
        console.log(password)
        
        createUserWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
            // Signed in
            const user = userCredential.user;
            // ... get loc, phone_number, etc.
            return addDoc(collection(db, "users"), {
                phone: phone_num,
                position: loc,
                JMT: JMT_map
            });
            // NOTE!!: you most probably want to create a Firestore user doc with the user Id as the doc Id... In this case use user.uid
        })
        .then((docRef) => {
            console.log("Document written with ID: ", docRef.id);
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log(errorCode);
            console.log(errorMessage);
        });
    }

How to solve 'Uncaught SyntaxError: Unexpected reserved word (at index.html:93:36)' in Firebase?

Question

1 answers

solution1
1 ACCPTED 2022-08-15 15:43:39

How to solve 'Uncaught SyntaxError: Unexpected reserved word (at index.html:93:36)' in Firebase?

Question

1 answers

solution1 1 ACCPTED 2022-08-15 15:43:39

solution1
1 ACCPTED 2022-08-15 15:43:39