React集成Web3Auth Modal调用initModal触发无效Hook调用错误

我正在React.js Web应用中集成Web3Auth Modal，已按照集成文档操作并解决了webpack相关问题，但调用web3auth.initModal()时触发以下错误：

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)

我的实现代码完全遵循官方文档：

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();
  }, []);

已尝试Stack Overflow上的相关方案但未解决，调用web3auth.connect()无响应，问题仅出现在本地React开发服务器中。

不应该出现上述钩子调用错误，Web3Auth Modal能正常初始化并响应连接请求。

• 设备：Dell G15 Intel
• 浏览器：Chrome、Brave
• React版本：^17.0.1
• Node版本：18.18.2
• @web3auth/modal版本：^7.0.5
• @web3auth/base版本：^7.0.4

已确认web3auth实例已正确赋值，但问题仍存在。

1. 排查多React实例问题 #

这是触发该错误最常见的原因，先检查项目中是否存在多个React副本：

npm ls react react-dom

如果输出显示多个版本，执行以下步骤统一版本：

1. 在package.json中明确指定react和react-dom为相同版本（比如^17.0.1）
2. 删除依赖文件：

   rm -rf node_modules package-lock.json
   

3. 重新安装依赖：

   npm install
   

2. 匹配Web3Auth与React版本兼容性 #

Web3Auth v7.x对React版本要求较高，你的React是17.0.1，建议降级到兼容React 17的Web3Auth v6.x版本：

npm uninstall @web3auth/modal @web3auth/base
npm install @web3auth/modal@^6.1.7 @web3auth/base@^6.1.7

注意v6版本的API略有差异，需参考对应版本的官方文档调整初始化代码。

3. 优化初始化逻辑 #

调整initModal()的调用时机，确保在函数组件上下文内执行，同时拆分连接逻辑到独立的点击事件：

import { Web3Auth } from "@web3auth/modal";
import { CHAIN_NAMESPACES } from "@web3auth/base";
import { useState, useEffect } from "react";

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

  useEffect(() => {
    const initWeb3Auth = async () => {
      try {
        const instance = new Web3Auth({
          clientId: "YOUR_CLIENT_ID",
          web3AuthNetwork: "testnet",
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: "0x1",
            rpcTarget: "https://rpc.ankr.com/eth",
          },
        });
        setWeb3auth(instance);
        await instance.initModal();
        if (instance.provider) setProvider(instance.provider);
      } catch (err) {
        console.error(err);
      }
    };
    initWeb3Auth();
  }, []);

  const handleConnect = async () => {
    if (!web3auth) return;
    try {
      const newProvider = await web3auth.connect();
      setProvider(newProvider);
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div>
      <button onClick={handleConnect}>连接Web3Auth</button>
    </div>
  );
};

export default Web3AuthComponent;

4. 确保React与React DOM版本一致 #

检查package.json中react和react-dom版本是否完全相同，若不一致，执行：

npm install react@17.0.1 react-dom@17.0.1

内容的提问来源于stack exchange，提问作者Bernardo Fonseca