title: MetaMask Web3 ethereum not defined
body: <p>I know this issue exists already and people have posted before but I can't get this working so sorry for asking this. </p>
  
  <p>I am using Heroku to build and deploy, this is not being done locally. </p>
  
  <p>I am trying to get MetaMask to get recognized in my Dapp and I am using the code generated by MetaMask to fix their privacy mode breaking change but I cannot get past 'web3' 'Web3' and 'ethereum' undefined compile error. I don't understand where it needs to go within my app. Any assistance would be greatly appreciated. Beyond appreciated. </p>
  
  <p>Here is my app.js:</p>
  
  <pre><code>
      import React, { Component } from 'react'
      import './App.css'
      import Navbar from './Navbar'
      import Content from './Content'
      import { connect } from 'react-redux'
      import {
        loadWeb3,
        loadAccount,
        loadToken,
        loadExchange
      } from '../store/interactions'
      import { contractsLoadedSelector } from '../store/selectors'
  
  
      window.addEventListener('load', async () =&gt; {
          // Modern dapp browsers...
          if (window.ethereum) {
              window.web3 = new Web3(ethereum);
              try {
                  // Request account access if needed
                  await ethereum.enable();
                  // Acccounts now exposed
                  web3.eth.sendTransaction({/* ... */});
              } catch (error) {
                  // User denied account access...
              }
          }
          // Legacy dapp browsers...
          else if (window.web3) {
              window.web3 = new Web3(web3.currentProvider);
              // Acccounts always exposed
              web3.eth.sendTransaction({/* ... */});
          }
          // Non-dapp browsers...
          else {
              console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
          }
      });
  
      class App extends Component {
        componentWillMount() {
          this.loadBlockchainData(this.props.dispatch)
        }
  
        async loadBlockchainData(dispatch) {
          const web3 = loadWeb3(dispatch)
          await web3.eth.net.getNetworkType()
          const networkId = await web3.eth.net.getId()
          await loadAccount(web3, dispatch)
          const token = await loadToken(web3, networkId, dispatch)
          if(!token) {
            window.alert('Token smart contract not detected on the current network. Please select another network with Metamask.')
            return
          }
          const exchange = await loadExchange(web3, networkId, dispatch)
          if(!exchange) {
            window.alert('Exchange smart contract not detected on the current network. Please select another network with Metamask.')
            return
          }
  
        }
  
        render() {
          return (
            &lt;div&gt;
              &lt;Navbar /&gt;
              { this.props.contractsLoaded ? &lt;Content /&gt; : &lt;div className="content"&gt;&lt;/div&gt; }
            &lt;/div&gt;
          );
        }
      }
  
  
      export default connect(mapStateToProps)(App)
      });
  
  </code></pre>