MetaMask Web3 ethereum не определен

Я знаю, что эта проблема уже существует, и люди публиковали ее раньше, но я не могу заставить ее работать, поэтому извините, что спрашиваю об этом.

Я использую Heroku для сборки и развертывания, это не делается локально.

Я пытаюсь заставить MetaMask распознаваться в моем Dapp, и я использую код, сгенерированный MetaMask, чтобы исправить изменение, нарушающее их режим конфиденциальности, но я не могу пройти мимо неопределенной ошибки компиляции 'web3', 'Web3' и 'ethereum'. Я не понимаю, что нужно делать в моем приложении. Будем очень благодарны любой помощи. Вне оценки.

Вот мой 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)
    });