Issue in building a simple decentralised app in web3

Question

Source: https://betterprogramming.pub/blockchain-introduction-using-real-world-dapp-react-solidity-web3-js-546471419955

First I created a config file which contains

export const CONTACT_ADDRESS = "0xfAd567EBdCb36f49F3a509FEDF9e72E3ad75ca59";
export const CONTACT_ABI = [{
    constant: true,
    inputs: [],
    name: "count"
}......]

and the app.js file looks like this

import { useEffect, useState } from "react";
import Web3 from "web3";
import { CONTACT_ABI, CONTACT_ADDRESS } from "./config/config";

function App() {
  const [account, setAccount] = useState();
  const [contactList, setContactList] = useState();
  const [contacts, setContacts] = useState([]);

  useEffect(() => {
    async function load() {
      const web3 = new Web3(Web3.givenProvider || "http://localhost:7545");

      const accounts = await web3.eth.requestAccounts();
      setAccount(accounts[0]);

      const contactList = new web3.eth.Contract(CONTACT_ABI, CONTACT_ADDRESS);

      setContactList(contactList);

      const counter = await contactList.methods.count().call();

      for (var i = 1; i <= counter; i++) {
        const contact = await contactList.methods.contacts(i).call();
        setContacts((contacts) => [...contacts, contact]);
      }
    }

    load();
  }, []);

  return (
    <div>
      Your account is: {account}
      <h1>Contacts</h1>
      <ul>
        {Object.keys(contacts).map((contact, index) => (
          <li key={`${contacts[index].name}-${index}`}>
            <h4>{contacts[index].name}</h4>
            <span>
              <b>Phone: </b>
              {contacts[index].phone}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

When running, I get the below error. I am not sure if the config file is causing this error. If so how can I fix it?

index.js:297 Uncaught (in promise) Error: Returned values aren't valid, did it run Out of Gas? You might also see this error if you are not using the correct ABI for the contract you are retrieving data from, requesting data from a block number that does not exist, or querying a node that is not fully synced.
    at ABICoder.push../node_modules/web3-eth-abi/lib/index.js.ABICoder.decodeParametersWith (index.js:297:1)
    at ABICoder.push../node_modules/web3-eth-abi/lib/index.js.ABICoder.decodeParameters (index.js:284:1)
    at Contract.push../node_modules/web3-eth-contract/lib/index.js.Contract._decodeMethodReturn (index.js:481:1)
    at Method.outputFormatter (index.js:788:1)
    at Method.push../node_modules/web3-core-method/lib/index.js.Method.formatOutput (index.js:147:1)
    at sendTxCallback (index.js:530:1)
    at cb (util.js:689:1)
    at Item.push../node_modules/process/browser.js.Item.run (browser.js:153:1)
    at drainQueue (browser.js:123:1)

Thinking that the contact_address is not correct, but not sure from where do I pick the correct one. Basically how I can build a config file?

Answer 1

In your config file, replace your CONTACT_ADDRESS with your smart contract address. It seems like you are using your wallet address.