Moralis login _ metamask problem

HI everyone
im at the moralis section and I keep getting this error code and for the life of me can not see where the problem is

any help would be greatly appreciated

dex.js:21 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at dex.js:21:43

here is my dex.js

 // connect to Moralis server
 const serverUrl = "https://xiqxyv5bgozp.usemoralis.com:2053/server";
 const appId = "7ZyhnEhnPqCPvyN7zLl4vNrymoTQ2YUJYiXOWf9y";
 Moralis.start({ serverUrl, appId });

    async function login() {
        let user = Moralis.User.current();
        if (!user) {
          user = await Moralis.authenticate();
        }
        console.log("logged in user:", user);
      }

      async function logOut() {
        await Moralis.User.logOut();
        console.log("logged out");
      }



      document.querySelector("#btn-login").addEventListener('click', login);
      
      
      document.getElementById("btn-logout").addEventListener(`click`, logOut);
    


    async function getTop10Tokens () {
        const response = await fetch('https://api.coinpaprika.com/v1/coins');
        const tokens = await response.json();

    return tokens
        .filter(token => token.rank >= 1 && token.rank <= 10)
        .map(token => token.symbol);
}

async function getTickerData(tickerList) {
    const response = await fetch('https://api.1inch.exchange/v3.0/137/tokens');
    const tokens = await response.json();
    const tokenList = Object.values(tokens.tokens);

    return tokenList.filter(token => tickerList.includes(token.symbol));
}

getTop10Tokens()
    .then(getTickerData)
    .then(console.log);

Hey @OzzieAl, hope you are well.

Could you also please share the html index file? that way i can replicate the issue and help you solve it :nerd_face:

Carlos Z

no worries here it is

<!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">
    <title>Moralis Dex</title>
    <!-- Moralis SDK code -->
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    <script src="./dex.js"></script>
</head>
<body>
    <h1></h1>

    <button id="btn-login">Moralis Login</button>
    <button id="btn-logout">Logout</button>


    


    
</body>
</html>

The issue here is that in your html file you load your script tags at the head tag, while they should be before the end of the body tag, like this:

<!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">
    <title>Moralis Dex</title>    
</head>
<body>
    <h1></h1>

    <button id="btn-login">Moralis Login</button>
    <button id="btn-logout">Logout</button>

    <!-- Moralis SDK code -->
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    <script src="./dex.js"></script>
</body>
</html>

Hope this helps.

Carlos Z

Great thank you will give it a go

All worked thankyou

1 Like

Hey @thecil,

I have a problem a little bit similar. I took the SDK to start on the dApp programming course but the metamask login does not work.
Can you help me please?

index.html file:

<<!DOCTYPE html>
<html>
  <head>
    <title>Vanilla Boilerplate</title>
    
  </head>

  <body>
    <h1>Moralis Hello World!</h1>

    <button id="btn-login">Moralis Metamask Login</button>
    <button id="btn-logout">Logout</button>

    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

main.js file:

/* Moralis init code */
const serverUrl = "https://tgvj9b2fzccq.usemoralis.com:2053/server";
const appId = "0LSCgoM8SLXscypNsGrPIOSauRrz06P1tvm4EwC4";
Moralis.start({ serverUrl, appId });

/* Authentication code */
async function login() {
    let user = Moralis.User.current();
    if (!user) {
      user = await Moralis.authenticate({
        signingMessage: "Log in using Moralis",
      })
        .then(function (user) {
          console.log("logged in user:", user);
          console.log(user.get("ethAddress"));
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }
  
  async function logOut() {
    await Moralis.User.logOut();
    console.log("logged out");
  }
  
  document.getElementById("btn-login").onclick = login;
  document.getElementById("btn-logout").onclick = logOut;

server url & app ID come from the server I made.

thanks!

1 Like

Your code is working fine from my side, clicking on login will popup the metamask windows, check that your metamask is enable in your browser (advice to use chrome or brave browser)

Carlos Z

hey @thecil

After trying everything I found my mistake! I had to do npm install moralis and everything worked just fine!

Thanks for the help!!!

1 Like