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

Question

It's really weird that I got empty array after I tried to web3.eth.getAccounts().then(console.log);and I 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 cmd create-react-app lottery_react and then all I changed in my lottery_react folder are modifying App.js and creating web3.js file. I can't find what's wrong in these file. Please help!

I've seen this but I didn't get the error that he/she gets. I only get a warning.

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

Later versions of metamask request permission to return the account, so after requesting the accounts metamask extension will popup to ask you for permission in the browser. Another thing I notice that you are using getAccounts(), but in later versions of metamask you can use requestAccount() instead.

The shortest way to solve this:

instead of: web3.eth.getAccounts().then(console.log);

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

After that metamask extention will ask you to confirm permissions then everything should go as expected :D

After confirming access permission with metamask, then go to metamask extension setting click on Connected sites, you can find your development domain.

If you find your development domain then everything is ok, and getAccounts() can work now, although you can keep requestAccounts() and everything still the same.

Answer 2

In my MetaMask, I go to the setting and choose Connection and add site localhost. In the end, the return value from web3.eth.getAccounts().then(console.log); no longer return empty array. However, it still pops up warning webpackHotDevClient.js:120 ./node_modules/web3-eth-accounts/src/scrypt.js Critical dependency: the request of a dependency is an expression, I still can't fix it.

Answer 3

I was facing the same issue on an old project which was working fine till recent past. Metamask changes are the cause. You have to call the enable function to access the accounts now. The privacy option in the settings have been removed. The DApp has to initiate from its side. Add this piece of code in the console. You will be prompted for a permission. Accept and then try accessing the accounts. If it works add in the code (for you in the web3.js file above web3 = new Web3(window.web3.currentProvider);).

window.ethereum.enable();

For me the following is the behaviour in console for any website other than new tab:

//the injected web3 is 0.20.7
web3.eth.accounts;
//returns empty array

window.ethereum.enable();
//Page refreshes after you Accept

web3.eth.accounts;
//returns the first account

EDIT: This also works:

const web3 = new Web3(window['ethereum'] || window.web3.currentProvider);

This is from Metamask API reference page.

The page explains that window.web3.currentProvider is now legacy.

Answer 4

I can connect with my private ethereum network using the following code:

web3.eth.getAccounts(function(err, accountList) {
        if(!err)
           console.log(accountList);
});

Hope you can do so.