Not initiliazing web3

Moralis General
#1

hello guys there is a problem with my code where it doesnt connect with metamask here is the code :

const Moralis = require('moralis');
const Moralis  = require('moralis/node');

Moralis.initialize("9PmarGeRjGYUJzL0fkLgY7TK4h9r6BryHGBo7wC0");
Moralis.serverURL = 'https://imgvpmtqkpng.moralis.io:2053/server'

init = async () => {
    window.web3 = await Moralis.Web3.enable();
    // await window.ethereum.send('eth_requestAccounts');
    // window.web3 = new Web3(window.web3.currentProvider);
    // window.ethereum.enable();
    initUser(user);
}

const user = Moralis.User.current();

initUser = async () => {
    if (await Moralis.User.current()){
        
        hideElement(usrConnectButton);
        showElement(usrPrflButton);
    }else{
        showElement(usrConnectButton);
        hideElement(usrPrflButton);
    }
}

login = async() => {
    try {
        await Moralis.Web3.authenticate();
        initUser(); 
    } catch (error) {
        window.alert("Та METAMASK эсвэл түрүүвчээ холбоно уу? ");
    }
}

hideElement = (element) => element.style.display = "none"; 
showElement = (element) => element.style.display = "block  ";


const usrConnectButton = document.getElementById("btnconnect");
usrConnectButton.onclick=login; 
const usrPrflButton = document.getElementById("btnusrinfo"); 




init();
#2

Hi bouncyknighter,

The problem is with how Moralis is being imported. Looks like this code is being used in the browser. The easiest way to use the Morlais SDK in the browser is using the CDN links, then you don’t need a require statement at all.

<head>
  <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
  <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
</head>

Only use a require if you’ve downloaded the moralis npm package. In that case only use the first one for the browser. The node import is only for NodeJS.

const Moralis = require('moralis');

If you put the CDN script tags in your html and delete the require statements from your javascript file it should work. See the docs here:

https://docs.moralis.io/getting-started/quick-start#install-the-sdk

And the “Dapp in 3 Minutes” tutorial here:
https://docs.moralis.io/guides/build-a-simple-dapp-in-3-minutes

#3

hey, i have removed the required statements, modified the HTML. it is still not initializing the web3 moralis,
here is the HTML.

<!doctype html>
<html class="no-js" lang="mn">

<head>
    <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="main.js"></script>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <meta name="theme-color" content="#fafafa">



</head>
<nav> This is the nav bar lol fuck this shit </nav>
<body>
    <div> 
        <button id="btnconnect"> Түрүүвчээ холбох </button> 
        <button id="btnusrinfo"> Таны мэдээлэл </button> 
    </div>
  <!-- Add your site or application content here -->
  <p>Hello world! This is HTML5 Boilerplate.</p>
  <script src="js/vendor/modernizr-3.11.2.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>







  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
  <script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async></script>
</body>

</html>
#4

Found the problem… move <script src="main.js"></script> from the <head> to the bottom of the <body>. The javascript file is getting executed before the page is rendered.

1 Like
#5

Thanks it did it! The problem was with my boilerplate code, wow it took me almost half a day to refactor the codes re copy paste write it from the start etc. xD

2 Likes