Rule of Hooks error when calling web3auth.initModal()

[jmsm412]

• SDK Version: 7.2.0
• Platform: React + Vite
• Browser Console Screenshots:
  
  

    const web3auth = new Web3Auth({
      clientId: import.meta.env.VITE_WEB3_AUTH_CLIENT,
      web3AuthNetwork: "sapphire_mainnet", // Web3Auth Network
      chainConfig: {
        chainNamespace: "eip155",
        chainId: "0x1",
        rpcTarget: "https://rpc.ankr.com/eth",
        displayName: "Ethereum Mainnet",
        blockExplorer: "https://goerli.etherscan.io",
        ticker: "ETH",
        tickerName: "Ethereum",
      },
    });
    await web3auth.initModal();

Hello everyone, I’m trying to implement a web3Auth modal in a new React + Vite project, but whenever I make the call to web3Auth.initModal I get the message above, about breaking the rule of hooks. The initialization of web3auth is basically all of the code in the vite project and I’m calling it in the App.ts file of the project, so I’m not really sure how I’m breaking the rule.

My react and react-dom version is 18.2.0, using node 8.16.0

Any help would be appreciated.

[maharshi]

Hey @jmsm412, welcome aboard!
It sounds like you’re encountering a common issue with React hooks. Let’s break down the problem and find a solution:

1. Mismatching Versions of React and Renderer: Ensure that the versions of React and the renderer (like React DOM) you are using are compatible. This is a common issue when you upgrade one package without upgrading the other. To fix this, update both React and your renderer to their latest versions, or at least to versions known to work well together.

2. Breaking the Rules of Hooks: Hooks must be called in the same order during every render. They should only be called from React function components or custom hooks. Make sure you are not using hooks inside loops, conditions, or nested functions.

3. Multiple Copies of React: Sometimes, especially in larger projects with many dependencies, you might end up with more than one copy of React in your bundle. This can cause hooks to work incorrectly. Use tools like npm ls react or yarn why react to check if you have multiple versions. Consolidate them to a single version if necessary.

To debug further:

• Check your components and hooks to ensure they follow the Rules of Hooks.
• Use the React DevTools to inspect your components and see where the error might be occurring.
• Review your project’s dependency tree to identify multiple instances of React.

By systematically addressing each of these points, you should be able to identify and fix the issue. Remember, when making changes to your package dependencies, it’s always a good idea to delete your node_modules directory and reinstall all packages to ensure a clean, consistent state.

If none of these steps resolve your issue, it would be helpful to see more of your code, particularly the component where this error is occurring. Sometimes, the problem might be in a different part of your code than you initially suspect.

Hope this helps! Let me know if you have any further questions or if there’s more code you can share for a deeper insight.