Why web3.eth.getAccounts().then(console.log) return empty array?

Question

I got empty array after I tried to web3.eth.getAccounts().then(console.log); and also got a warning which is ./node_modules/web3-eth-accounts/src/scrypt.js Critical dependency: the request of a dependency is an expression . In this project I first commanded create-react-app lottery_react and then all I changed in my lottery_react folder are modifying App.js with only one line web3.eth.getAccounts().then(console.log); and creating web3.js file. I can't find what's wrong in these file. Please help!

I've seen this and this but we all face different kinds of problem.

This is my App.js

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

import web3 from './web3';

class App extends Component {
  render(){
    web3.eth.getAccounts().then(console.log);
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

This is my web3.js file

import Web3 from 'web3';

const web3 = new Web3(window.web3.currentProvider);

export default web3;

Answer 1

It is very simple you just need to enable the Ethereum in the browser, you can do like this: Just add " await window.ethereum.enable();"

     const getData = async () => {
        const web3 = new Web3(Web3.givenProvider);
        const network = await web3.eth.net.getNetworkType();
        await window.ethereum.enable();
        const accounts = await web3.eth.getAccounts();
        setAccount(accounts[0]);
        console.log("TCL: getData -> network", network);
        console.log("TCL: getData -> accounts", accounts);
      };

Answer 2

You now need to request permission from the user to get their accounts. So instead of

web3.eth.getAccounts().then(console.log);

do

web3.eth.requestAccounts().then(console.log);

Answer 3

Seems that Metamask is no longer exposing accounts by default, so if you want to access them you need to ask permission to the user. You can see the details in this announcement

Long story short, update your web3.js file to this:

import Web3 from 'web3';

const web3 = new Web3(window.web3.currentProvider);

window.addEventListener("load", async () => {
  // Modern dapp browsers...
  if (window.ethereum) {
    window.web3 = new Web3(window.ethereum);
    try {
      // Request account access if needed
      await window.ethereum.enable();
    } catch (error) {
      // User denied account access...
    }
  }
  // Legacy dapp browsers...
  else if (window.web3) {
    window.web3 = new Web3(web3.currentProvider);
  }
  // Non-dapp browsers...
  else {
    console.log("Non-Ethereum browser detected. You should consider trying MetaMask!");
  }
});

export default web3;

Answer 4

Instead of const web3 = new Web3(window.web3.currentProvider); , can you try

const web3 = new Web3(new Web3.providers.HttpProvider(`http://127.0.0.1:7545`));

I am assuming you are running ethereum locally on port 7545

Answer 5

I had your problem too... Go to your console with press F12 and be careful that in your Localhost tab(for me was localhost:3000) and then write "ethereum.enable().then(console.log)" in your console. then you can connect to meta mask. Good Luck bro ;)

Answer 6

确保您将 React 应用程序与 MetaMask 扩展程序连接。

Answer 7

I'm using MetaMask, and this worked for me. Found it here .

ethereum
  .request({ method: 'eth_accounts' })
  .then((accounts) => { 
     console.log(accounts); 
  })
  .catch((err) => {
    console.error(err);
  });