title: Web3 error when trying to call contract methods
body: <p>I encounter the following error while trying to run a dapp made using React, Truffle &amp; Ganache. I'm also using web3 version 1.7.1. The problem is that the code enters in a catch(error) sequence of a try/catch and then displays what it is intended correctly. Why is this happening and why does the following error appears?</p>
  <pre><code>index.js:1 TypeError: Cannot read properties of undefined (reading 'methods')
  at HomePage.componentDidMount
  </code></pre>
  <p>What the code should do: Display something like &quot;Address is: 0x0D05b3220E9cC7A90623fc506cEB64Ab885FD6C6&quot;</p>
  <p>What the code does: It shows me the prompt &quot;Failed to load web3, accounts, or contract. Check console for details&quot; AND THEN &quot;Address is: 0x0D05b3220E9cC7A90623fc506cEB64Ab885FD6C6&quot;</p>
  <p>The code is the following:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import MySmartContract from &quot;../contracts/MySmartContract.json&quot;;
  import getWeb3 from &quot;../getWeb3&quot;;
  
  //Importing components
  
  
  
  class HomePage extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        ContractInstance: undefined,
        account: null,
        web3: null,
        isOwner: false
      }
    }
  
    componentDidMount = async () =&gt; {
  
      // For refreshing the page a single time
      // so that web3 and instance is loaded every time
      if (!window.location.hash) {
        window.location = window.location + '#loaded';
        window.location.reload();
      }
  
      try {
        // Get network provider and web3 instance.
        const web3 = await getWeb3();
  
        // Use web3 to get the user's accounts.
        const accounts = await web3.eth.getAccounts();
  
        // Get the contract instance.
        const networkId = await web3.eth.net.getId();
        const deployedNetwork = MySmartContract.networks[networkId];
        const instance = new web3.eth.Contract(
          MySmartContract.abi,
          deployedNetwork &amp;&amp; deployedNetwork.address,
        );
  
        // Set web3, accounts, and contract to the state, and then proceed with an
        // example of interacting with the contract's methods.
        this.setState({ ContractInstance: instance, web3: web3, account: accounts[0] });
  
  
        const owner = await this.state.ContractInstance.methods.getOwnerAddress().call();
        if (this.state.account === owner) {
          this.setState({ isOwner: true });
        }
  
    
  
      } catch (error) {
        // Catch any errors for any of the above operations.
        alert(
          `Failed to load web3, accounts, or contract. Check console for details.`,
        );
        console.error(error);
      }
    };
  
  
    render() {
  
  
      if (!this.state.web3) {
  
        return (
         
              &lt;h1&gt;
                Loading Web3, accounts and contract...
              &lt;/h1&gt;
            
           
       
        )
  
      }
      return (
        &lt;div&gt;&lt;h1&gt;Address is: {this.state.account}&lt;/h1&gt;&lt;/div&gt;
  
      )
  
    }
  }
  
  export default HomePage;
  </code></pre>
  <p>The content of getWeb3.js is the following:</p>
  <p>import Web3 from &quot;web3&quot;;</p>
  <pre><code>const getWeb3 = () =&gt;
    new Promise((resolve, reject) =&gt; {
      // Wait for loading completion to avoid race conditions with web3 injection timing.
      window.addEventListener(&quot;load&quot;, async () =&gt; {
        // Modern dapp browsers...
        if (window.ethereum) {
          const web3 = new Web3(window.ethereum);
          try {
            // Request account access if needed
            await window.ethereum.enable();
            // Accounts now exposed
            resolve(web3);
          } catch (error) {
            reject(error);
          }
        }
        // Legacy dapp browsers...
        else if (window.web3) {
          // Use Mist/MetaMask's provider.
          const web3 = window.web3;
          console.log(&quot;Injected web3 detected.&quot;);
          resolve(web3);
        }
        // Fallback to localhost; use dev console port by default...
        else {
          const provider = new Web3.providers.HttpProvider(
            &quot;http://127.0.0.1:8545&quot;
          );
          const web3 = new Web3(provider);
          console.log(&quot;No web3 instance injected, using Local web3.&quot;);
          resolve(web3);
        }
      });
    });
  
  export default getWeb3;
  </code></pre>