Dex "Moralis is not defined" Error

Moralis General
#1

Hello! When I open my code with LiveServer I get the following error:

Uncaught ReferenceError: Moralis is not defined
    at main.js:4

Im not 100% sure why it isnt working. I have added 'defer; to my script tag in JS. Thank you! (:

Here is the js file:

/** Connect to Moralis server */
const serverUrl = "https://XYZ";
const appId = "ABC";
Moralis.start({ serverUrl, appId });

async function init(){
    await Moralis.initPlugins();
    await Moralis.enableWeb3();
    await listAvailableTokens();
}

async function listAvailableTokens(){
    const result = await Moralis.Plugins.oneInch.getSupportedTokens({
        chain: 'eth',
      });
    const tokens = result.tokens;
    let parent = document.getElementById("token_list");
    for( const address in tokens){
        let token = tokens[address];
        let div = document.createElement("div");
        div.className = "token_row";
        let html = `
        <img class="token_list_img" src="${token.logoURI}">
        <span class="token_list_text">${token.symbol}</span>
        `
        div.innerHTML = html;
        parent.appendChild(div);
    }
}

async function login() {
  let user = Moralis.User.current();
  if (!user) {
   try {
      user = await Moralis.authenticate({ signingMessage: "Hello World!" })
      console.log(user)
      console.log(user.get('ethAddress'))
   } catch(error) {
     console.log(error)
   }
  }
}
#2

what do you have in the header of you html file that uses this javascript file?

#3

Hey (:slight_smile:

I added ‘defer’ to one of the script lines to fix another error.
Here is the header:

<head>
    <title>dex</title>
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js" defer></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
  </head>
#4

maybe because of that defer is not working

#5

If I dont put defer it launches other errors, namely it returns null when I use appendChild in my JS file

#6

it shouldn’t create problems for appendChild

#7

I just removed it and it causes this error when I inspect the webpage:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'appendChild')
    at listAvailableTokens (main.js:27)
    at async init (main.js:9)

Here is the JS (thank you for all you help):

/** Connect to Moralis server */
const serverUrl = "https://XYZ";
const appId = "ABC";
Moralis.start({ serverUrl, appId });

async function init(){
    await Moralis.initPlugins();
    await Moralis.enableWeb3();
    await listAvailableTokens();
}

async function listAvailableTokens(){
    const result = await Moralis.Plugins.oneInch.getSupportedTokens({
        chain: 'polygon',
      });
    const tokens = result.tokens;
    let parent = document.getElementById("token_list");
    for( const address in tokens){
        let token = tokens[address];
        let div = document.createElement("div");
        div.className = "token_row";
        let html = `
        <img class="token_list_img" src="${token.logoURI}">
        <span class="token_list_text">${token.symbol}</span>
        `
        div.innerHTML = html;
        parent.appendChild(div);
    }
}

async function login() {
  let user = Moralis.User.current();
  if (!user) {
   try {
      user = await Moralis.authenticate({ signingMessage: "Hello World!" })
      console.log(user)
      console.log(user.get('ethAddress'))
   } catch(error) {
     console.log(error)
   }
  }
}

function openModal(){
    document.getElementById("token_modal").style.display = "block";
}

function closeModal(){
    document.getElementById("token_modal").style.display = "none";
}
document.getElementById("modal_close").onclick = closeModal;
document.getElementById("from_token_select").onclick = openModal;
document.getElementById("login_button").onclick = login;

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

init();
#8

what you get if you use console.log("parent") after this line?

#10

Okay when I do console.log(parent); it prints null so Im assuming my html file must be doing something wrong

#11

SOLVED: typo in html ID… lol for future people; check your html file FIRST if you have this issue!!