Web3auth ERROR: Invalid hook call. Hooks can only be called inside of the body of a function component

Question

Describe the bug

I`m trying to implement web3auth modal on a react.js web app. I followed the integration-builder docs, even the webpack issues were already solved. Everything seemed to work until I call web3auth.initModal(). When it's called, I receive this error message:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (http://localhost:3000/static/js/bundle.js:203892:17)
    at useContext (http://localhost:3000/static/js/bundle.js:221766:25)
    at useTranslation (http://localhost:3000/static/js/bundle.js:261287:63)
    at Modal (http://localhost:3000/static/js/bundle.js:72361:89)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:87254:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:90540:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:91836:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:76846:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:76890:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:76947:35)

I just reproduced the code provided by the docs:

import { Web3Auth } from "@web3auth/modal";
import { CHAIN_NAMESPACES } from "@web3auth/base";

...

const [web3auth, setWeb3auth] = useState(null);
const [provider, setProvider] = useState(null);

useEffect(() => {
    const init = async () => {
      try {
        const web3auth = new Web3Auth({
          clientId, 
          web3AuthNetwork: "testnet", // mainnet, aqua,  cyan or testnet
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: "0x1",
            rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
          },
        });

        setWeb3auth(web3auth);

        await web3auth.initModal();

        if (web3auth.provider) {
          setProvider(web3auth.provider);
        };

      } catch (error) {
        console.error(error);
      }
    };

    init();
  }, []);

I followed this documentation: https://web3auth.io/docs/integration-builder?lang=REACT&chain=ETH&evmFramework=WEB3&customAuth=NONE&mfa=DEFAULT&whitelabel=NO&useModal=YES&web3AuthNetwork=TESTNET&rnMode=EXPO&stepIndex=3&stepIndex=0#step-3

I also tried this solution, but it seems to not be the problem: Invalid hook call. Hooks can only be called inside of the body of a function component

If it helps, when I call web3auth.connect(), it does nothing.

It happens on react development server running on localhost.

Expected behavior

The mentioned error should not appear.

Screenshots

Device Info (please complete the following information):

• Device: Dell g15 intel
• Browser: chrome and brave
• react: ^17.0.1
• node: 18.18.2
• Web3Auth/modal: ^7.0.5
• web3auth/base: ^7.0.4

I tried this solution, but it seems to not be the problem: Invalid hook call. Hooks can only be called inside of the body of a function component

I also tried to check for web3auth to be a valid value, using if conditions or optional chaining operator web3auth?.initModal(). Actually web3auth has a value as shown on the images.

Answer 1

It seemed to be a version compatibility problem. Web3auth/base 7.0.5 requires react and react-dom newer versions. So I updated react e react-dom to 18.2.0 and it works fine now.