0

I am following what seems a relatively simple tutorial to create a smartcontract, however, I am getting the above error and I am stumped as to what is causing it

Below is my html file

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Web 3 Demo</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <script src='node_modules/web3/dist/web3.min.js'></script>
</head>

<body>

    Web 3 Demo
    <br >
    <button onclick="printCoolNumber();">Print Cool Number</button>
    <button onclick="changeCoolNumber();">Change Cool Number</button>
    <br /><br />
    Status: <span id="status">Loading...</span>
    
    <script type="text/javascript">

        async function loadContract()
        {
            return await new window.web3.eth.Contract(
            [
                {
                    "inputs": 
                    [
                        {
                            "internalType": "uint256",
                            "name": "_coolNumber",
                            "type": "uint256"
                        }
                    ],
                    "name": "setCoolNumber",
                    "outputs": [],
                    "stateMutability": "nonpayable",
                    "type": "function"
                },
                {
                    "inputs": [],
                    "name": "coolNumber",
                    "outputs": 
                    [
                        {
                            "internalType": "uint256",
                            "name": "",
                            "type": "uint256"
                        }
                    ],
                    "stateMutability": "view",
                    "type": "function"
                }
            ], 0x80bA34870daee123d963e3C3EA2446aCd5dD668A);
        }
        
        async function loadWeb3()
        {
            if (window.ethereum)
            {
                window.web3 = new Web3(window.ethereum);
                window.ethereum.enable();
            }
        }
        
        async function load()
        {
            await loadWeb3();
            window.contract = await loadContract();
            updateStatus('Ready!');
        }
        
        function updateStatus(status)
        {
            const statusEl = document.getElementById('status');
            statusEl.innerHTML = status;
            console.log(status);
        }
        
        load();
    </script>
</body>

</html>

The error itself occurs on line 26 with the call to return await new window.web3.eth.Contract(

Running on windows and simple loading the index.html fro the browser with the following syntax

file:///C:/users/<username>/documents/index.html

From command line I have also run

npm install web3 import Web3 from 'web3'

So I think I've done everything correctly but wondered if anyone could help please.

1
  • For security reasons when showing an html file the browser might disable some functionality. Can you try serving the html file by http server instead?
    – Ismael
    Commented Aug 1, 2022 at 13:54

1 Answer 1

0

The main problem is you are not serving your HTML content from a server rather you are just opening it using file:///

metamask gives or injects new window.web3 only when it is served over HTTP or https. So in your case there won't be the scope hence facing the error.

Hope this helps you!!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.