web3-react error: Web3ReactProvider not calling getLibrary function

Question

I have this issue on a simple react app. I am trying to connect to metamask using a "Connect" button, but when i click that button the console shows an error saying "Error: Invariant failed: No <Web3ReactProvider ... /> found."

As you can see, I added a console to the getLibrary function and it is not logging, so, that function is never called.

import "./App.css";
import React from "react";
import { Web3ReactProvider, useWeb3React } from "@web3-react/core";
import { Web3Provider } from "@ethersproject/providers";
import { InjectedConnector } from "@web3-react/injected-connector";

const injected = new InjectedConnector({
  supportedChainIds: [1, 3, 4, 5, 42],
});

function getLibrary(provider) {
  console.log("getting library") 
  const library = new Web3Provider(provider)
  library.pollingInterval = 12000
  return library
}

const App = () => {
  const { active, account, library, connector, activate, deactivate } =
    useWeb3React();

  async function connect() {
    console.log("connecting");
    try {
      await activate(injected);
    } catch (ex) {
      console.log(ex);
    }
  }

  async function disconnect() {
    try {
      deactivate();
    } catch (ex) {
      console.log(ex);
    }
  }

  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <div className="App">
        {!active ? <button onClick={connect}>Connect</button> : <button onClick={connect}>Disconnect</button>}
      </div>
     </Web3ReactProvider>
 );
}

Answer 1

The issue here is that you are trying to call the use hook in the same component where you define the Context Provider. Move the Provider one level higher, into the component calling App, or move the hook and remaining logic one level lower into a new component.