MetaMask Web3 以太坊未定义

Question

我知道这个问题已经存在并且人们之前已经发布过但是我无法让它工作所以很抱歉提出这个问题。

我正在使用 Heroku 来构建和部署，这不是在本地完成的。

我试图让 MetaMask 在我的 Dapp 中得到认可，我正在使用 MetaMask 生成的代码来修复他们的隐私模式破坏性变化，但我无法通过 'web3' 'Web3' 和 'ethereum' 未定义的编译错误。 我不明白在我的应用程序中需要 go 的位置。 任何帮助将不胜感激。 超越赞赏。

这是我的 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

截至 2021 年 1 月，Metmask 已移除其注入的window.web3

如果您想将您的 dApp 连接到 Metamask，我会尝试以下操作

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"
        }
      } 
};

如果您还想学习如何使用 Metamask 签署交易，我建议您查看这个超级适合初学者的 NFT Minter 教程。 你有这个！

Answer 2

在这里有人说你可以通过写来解决“ethereum is not defined”

const { ethereum } = window

这在 React 18.1.0 中对我有用