Uncaught TypeError: web3 is not a constructor. the blockchain website cannot connect to metamask

Question

i have issue on web3.eth.defaultAccount = web3.eth.getAccounts();

below is the code. it said Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getAccounts')

the version of my web3 is "^1.3".

var contract = "";

if (typeof web3 !== 'undefined') {
console.log('inside web3')
Web3 = new Web3 (Web3.currentProvider);
} else {
console.log('else web3');
var web3 = new Web3(new Web3.providers.HttpProvider(provider));

}

window.ethereum.enable()
.then(function (accounts) {
    console.log(accounts[0]);

    web3.eth.defaultAccount = web3.eth.getAccounts();

    var contractabi = web3.eth.contract([ABI])

Answer 1

function must be async

window.addEventListener("load", async () => {
  // Modern dapp browsers...
  if (window.ethereum) {
    const web3 = new Web3(window.ethereum);
    try {
      // Request account access if needed
      await window.ethereum.enable();
      // Acccounts now exposed
      resolve(web3);
    } catch (error) {
      reject(error);
    }
  }

try this to fit your case

Answer 2

if possible send me the complete implementation of this code, or you can add this

class App extends Component {
  async UNSAFE_componentWillMount() {
    await this.loadWeb3();
    await this.loadBlockchainData();
  }

  async loadWeb3() {
    if (window.ethereum) {
      window.web3 = new Web3(window.ethereum);
      await window.ethereum.enable();
    } else if (window.web3) {
      window.web3 = new Web3(window.web3.currentProvider);
    } else {
      window.alert('No ethereum broswer detected! You can check out MetaMask!');
    }
  }

  async loadBlockchainData() {
    const web3 = window.web3;
    const account = await web3.eth.getAccounts();
    this.setState({ account: account[0] });
    const networkId = await web3.eth.net.getId();
  }
}

please use async function to interact with web3 and await the response