No tutorial can help me, I have watched almost every major tutorial on Youtube and read a ton of results from Google...

I have on my HTML file imported the web3.min.js (copied from Truffle pet-shop because web3 does not come with this anymore!)

And then on a script tag below that, for testing, I manage to connect it with Metamask, I thin, with

    window.addEventListener('load', () => {
  if (typeof Web3 !== 'undefined') {
    web3js = new Web3(Web3.currentProvider);
  } else {
    console.log('No web3? You should consider trying MetaMask!');
    web3js = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));

But still Web3.eth is undefined, so I can't connect to a contract or make calls.

Can anyone help me with the basic steps to interact with the contract from a front end?...


The Metamask interface has changed to enable privacy and consent from the user before allowing any access to the account information contained within Metamask. This is done by injecting an "ethereum" object to the browser window. You must now wait for the ethereum.enable() function to return true after prompting the user. More details here: https://medium.com/metamask/https-medium-com-metamask-breaking-change-injecting-web3-7722797916a8

window.addEventListener('load', () => {
 // Wait for loading completion to avoid race conditions with web3 injection timing.
  if (window.ethereum) {
    const web3 = new Web3(window.ethereum);
    try {
      // Request account access if needed
      await window.ethereum.enable();
      // Acccounts now exposed
      return web3;
    } catch (error) {
  // Legacy dapp browsers...
  else if (window.web3) {
    // Use Mist/MetaMask's provider.
    const web3 = window.web3;
    console.log('Injected web3 detected.');
    return web3;
  // Fallback to localhost; use dev console port by default...
  else {
    const provider = new Web3.providers.HttpProvider('');
    const web3 = new Web3(provider);
    console.log('No web3 instance injected, using Local web3.');
    return web3;
  • 1
    you have to declare the anonymous function as async
    – mattias
    Sep 20 '20 at 0:44

You are mixing capital case Web3 with small case web3. Web3.eth does not exits.

Try following:

window.addEventListener('load', () => {
    if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
    } else {
        console.log('No web3? You should consider trying MetaMask!');
        web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));

now you can write something like web3.eth


MetaMask is not only kind of the wallet anymore. There is now more generic Web3modal solution that allows e.g. mobile wallets to connect with your dApp. It supports both web MetaMask and MetaMask mobile via WalletConnect protocol:



window.web3 is removed by metamask. now everything can be done with window.ethereum - web3 removal link by metamask

Below is the new way of getting accounts.

import detectEthereumProvider from '@metamask/detect-provider';

initialize ethereum provider

async loadWeb3() {
const provider = await detectEthereumProvider()

if (provider) {
  console.log('Ethereum successfully detected!')
  // From now on, this should always be true:
  // provider === window.ethereum

  // Access the decentralized web!

  // Legacy providers may only have ethereum.sendAsync
  const chainId = await provider.request({
    method: 'eth_chainId'
} else {
  // if the provider is not detected, detectEthereumProvider resolves to null
  console.error('Please install MetaMask!' )

Here is how you can access the accounts:

async loadWeb3Accounts() {
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.