Uncaught Error: missing provider

Question

I am building a web3 and I have a problem where the page doesn't load if the browser doesn't detect Metamask (or web3 app) and it loads and works perfectly otherwise.

I looked at the browser's Console, in the case where Metamask isn't installed and saw this error:

Uncaught Error: missing provider (argument="provider", value=undefined, code=INVALID_ARGUMENT, version=providers/5.7.2)

in my source code I have these lines in the global variables section (right before the function Main() { line):

const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();

so I am assuming when Metamask isn't install, this first line is causing a trouble that I can't seem to avoid or fix, and I am unable to find a way to put them inside the Main() function because many inner functions use them (inside Main).

I have tried so many things so far and searched a lot. Any idea how I can fix this. Thanks

Answer 1

Okay I fixed it by replacing the first line with:

const provider = ((window.ethereum != null) ? new ethers.providers.Web3Provider(window.ethereum) : ethers.providers.getDefaultProvider());

Answer 2

Dev advocate at Chainstack here!

You could also implement this code from the MetaMask docs, where you can display an error and prompt a user to install MetaMask in case it's not installed!

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

// this returns the provider, or null if it wasn't detected
const provider = await detectEthereumProvider();

if (provider) {
  startApp(provider); // Initialize your app
} else {
  console.log('Please install MetaMask!');
}

function startApp(provider) {
  // If the provider returned by detectEthereumProvider is not the same as
  // window.ethereum, something is overwriting it, perhaps another wallet.
  if (provider !== window.ethereum) {
    console.error('Do you have multiple wallets installed?');
  }
  // Access the decentralized web!
}

Answer 3

In React you can fix like that;

useEffect(() => {
try{
 const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    const _contract = new ethers.Contract(smartContratAdress, abi , signer)
    setContract(_contract);}
    catch(err){
        alert('Install Metamask')
    }
}, [])

return contract;

Answer 4

The cause of the problem is simply error handling.

In your case, when provider is undefined, i.e. no wallet connected or found. Your project does not know what to do with it, hence the error.

There are several ways to handle the error.

You can try wrapping it around a try and catch and then using let globally instead of Const, so that the value is available to the rest of your code.

You can also use detectEthereumProvider from MetaMask and once the condition is true, provider can be called and assigned safely Like it was doe here MetaMask Sample Code

So in short, however way you think is best to handle errors should work just fine