EthosConnect在Next.js应用中卡顿加载并触发RPC错误求助

问题描述 #

原本能成功连接Sui钱包，刷新页面后抛出以下运行时错误：

Unhandled Runtime Error
Error: Error fetching owned object: Error: RPC Error: Method not found for address

Call Stack
JsonRpcProvider.eval
node_modules/@mysten/sui.js/dist/index.mjs (3554:0)
Generator.throw

rejected
node_modules/@mysten/sui.js/dist/index.mjs (52:0)

用户的页面代码如下：

export default function HomePage() {
  const { status, wallet } = ethos.useWallet();

  return (
    <EthosConnectProvider
      dappName='Joed'
      connectMessage='Your connect message goes here!'
      ethosConfiguration={{
        hideEmailSignIn: false, // defaults to false,
      }}
    >
      <Layout>
        <Seo />

        <main>
          <section className='bg-white'>
            <div>
              Status: {status}, address {wallet?.address}
            </div>
            <SignInButton> Connect Wallet </SignInButton>
          </section>
        </main>
      </Layout>
    </EthosConnectProvider>
  );
}

问题原因 #

核心问题是组件初始化顺序错误：你在EthosConnectProvider的上下文范围之外调用了useWallet()钩子。刷新页面时，useWallet()会在Provider完成初始化前尝试获取钱包状态，导致无效的RPC调用，触发"Method not found"错误。

解决方案 #

方案1：拆分组件，将钱包逻辑移到Provider内部 #

把使用useWallet()的代码抽成子组件，确保钩子在Provider的上下文范围内执行：

// HomePage.js
export default function HomePage() {
  return (
    <EthosConnectProvider
      dappName='Joed'
      connectMessage='Your connect message goes here!'
      ethosConfiguration={{
        hideEmailSignIn: false,
      }}
    >
      <WalletContent />
    </EthosConnectProvider>
  );
}

// 子组件：WalletContent.js
function WalletContent() {
  const { status, wallet } = ethos.useWallet();
  
  return (
    <Layout>
      <Seo />
      <main>
        <section className='bg-white'>
          <div>
            Status: {status}, address {wallet?.address}
          </div>
          <SignInButton> Connect Wallet </SignInButton>
        </section>
      </main>
    </Layout>
  );
}

方案2：将Provider移到全局入口（推荐） #

把EthosConnectProvider放在_app.js中，让所有页面共享上下文，避免重复初始化问题：

// pages/_app.js
import { EthosConnectProvider } from '@ethos-connect/react';

export default function App({ Component, pageProps }) {
  return (
    <EthosConnectProvider
      dappName='Joed'
      connectMessage='Your connect message goes here!'
      ethosConfiguration={{
        hideEmailSignIn: false,
      }}
    >
      <Component {...pageProps} />
    </EthosConnectProvider>
  );
}

// HomePage.js
export default function HomePage() {
  const { status, wallet } = ethos.useWallet();
  
  return (
    <Layout>
      <Seo />
      <main>
        <section className='bg-white'>
          <div>
            Status: {status}, address {wallet?.address}
          </div>
          <SignInButton> Connect Wallet </SignInButton>
        </section>
      </main>
    </Layout>
  );
}

补充说明 #

• 确保@ethos-connect/react与@mysten/sui.js版本兼容，建议升级到最新稳定版
• 刷新页面时EthosConnect会自动尝试恢复钱包连接，必须保证Provider优先完成初始化，钩子才能正确获取上下文状态

内容的提问来源于stack exchange，提问作者channa ly