MetaMask Web3 ethereum not defined

Question

I know this issue exists already and people have posted before but I can't get this working so sorry for asking this.

I am using Heroku to build and deploy, this is not being done locally.

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.

Here is my app.js:

    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 () => {
        // 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 (
          <div>
            <Navbar />
            { this.props.contractsLoaded ? <Content /> : <div className="content"></div> }
          </div>
        );
      }
    }


    export default connect(mapStateToProps)(App)
    });

Answer 1

As of January 2021, Metmask has removed their injected window.web3

If you want to connect your dApp to Metamask, I'd try the following

export const connectWallet = async () => {
  if (window.ethereum) { //check if Metamask is installed
        try {
            const address = await window.ethereum.enable(); //connect Metamask
            const obj = {
                    connectedStatus: true,
                    status: "",
                    address: address
                }
                return obj;
             
        } catch (error) {
            return {
                connectedStatus: false,
                status: "🦊 Connect to Metamask using the button on the top right."
            }
        }
        
  } else {
        return {
            connectedStatus: false,
            status: "🦊 You must install Metamask into your browser: https://metamask.io/download.html"
        }
      } 
};

If you'd like to learn how to also sign transactions with Metamask, I'd recommend you check out this super beginner-friendly NFT Minter tutorial . You got this!

Answer 2

over here someone says you can solve "ethereum is not defined" by writing

const { ethereum } = window

This works for me in React 18.1.0