Why does it say "(function) is defined but value is never read"?

Question

So I am learning firebase authentication and came across an issue while I was following a youtube video(Pardon me, I am an absolute noob). However, while working on a simple login system I wasn't able to let my HTML onclick element reference the function 'login()'. And when I checked the JS file, it said that the function is defined but its value is never read. So I am not sure why that problem is occurring.

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
import { getAuth, onAuthStateChanged, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-auth.js";
import { getFirestore, collection, getDocs } from "https://www.gstatic.com/firebasejs/9.0.2/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 = {
  apiKey: "_______________________",
  authDomain: "fir-fb-1eb95.firebaseapp.com",
  projectId: "fir-fb-1eb95",
  storageBucket: "fir-fb-1eb95.appspot.com",
  messagingSenderId: "1037178727764",
  appId: "1:1037178727764:web:c1d8c888a61829f5b9acc1"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();

onAuthStateChanged(auth, (user) => {
  if (user) {
      // User is signed in, see docs for a list of available properties
      // https://firebase.google.com/docs/reference/js/firebase.User
      document.getElementById('user_div').style.display='block';
      document.getElementById('login_div').style.display='none';
      const uid = user.uid;
      // ...
  } else {
      // User is signed out
      // ...
      document.getElementById('user_div').style.display='none';
      document.getElementById('login_div').style.display='block';
  }
  });
  

function login(){
    window.alert('Hey!');
  
}

<!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="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="style.css">
    

    <title>Document</title>
</head>
<body>
    
    
    <!--<script type="module" src='index.js' async></script>-->
    <div id="login_div" class="main_div">
        <h3>Firebase Web Login</h3>
        <input type="email" placeholder="Email..." id='email'>
        <input type="password" placeholder="Password..." id='pass'>

        <button onclick="login()">Login to Account</button>
    </div>

    <div class="logged_in" id='user_div'>
        <h3>Welcome User</h3>
        <p>Welcome to Firebase Login</p>
        <button>Logout</button>
    </div>

    <script type='module' src="index.js" async></script>

    
</body>



</html>

I haven't put anything in the login function till now cause I wanted to figure out what the problem was. I hope I was clear. Also, since I am a beginner, it would be nice if you guys approached the issue in a way I would understand. Thanks :)

This is due the the rules defined in your `.eslint` config file. At compile time it hecks for unused functions and variable names. Check here for [more](https://eslint.org/docs/rules/no-unused-vars) info — Harshit Rastogi, Sep 27 '21 at 12:29
Your function is in a module, so it's scoped only to that module and can't be accessed in the DOM, you can add a click event listener to your element though — Nick Parsons, Sep 27 '21 at 12:30

Why does it say "(function) is defined but value is never read"?

0 Answers0