使用Svelte开发Web3应用首次打开时Metamask报连接错误如何解决？

问题产生原因 #

• 核心是Brave浏览器内置Web3钱包与Metamask扩展的注入时序冲突：Brave默认自带原生加密货币钱包，首次加载页面时window.ethereum会先被Brave原生钱包注入，此时Metamask尚未完成初始化，直接调用相关API会触发连接冲突，抛出对应报错。
• 代码存在时序逻辑问题：直接同步判断window.ethereum存在就执行后续操作，没有等待所有钱包扩展完成注入；同时使用了已废弃的ethereum.enable()API，异步状态没有同步完成就执行后续的连接状态判断、账户查询逻辑，也会触发报错。
• 刷新后恢复正常的原因是页面重载时所有扩展已经完成初始化注入，window.ethereum此时已经是用户设置的默认钱包（Metamask）的注入对象，冲突消失后逻辑即可正常运行。

解决方案 #

1. 调整初始化逻辑执行时机 #

在Svelte的onMount生命周期中执行钱包相关初始化操作，确保页面资源、扩展全部加载完成后再做判断，避免同步执行时注入未完成的问题：

import { onMount } from 'svelte';

let metamaskConnected = false;
let WalletAddress = [];

onMount(() => {
  // 增加100ms延迟适配多钱包注入场景，确保Metamask注入完成
  setTimeout(() => {
    // 增加isMetaMask判断，过滤其他钱包注入的ethereum对象
    if (window.ethereum?.isMetaMask) {
      window.web3 = new Web3(window.ethereum);
    }
  }, 100)
})

2. 替换废弃API，使用标准异步调用 #

将已废弃的ethereum.enable()替换为EIP-1193标准的eth_requestAccounts请求，所有钱包操作全异步处理，避免同步状态不一致的问题：

async function connectWallet(){
  if (!window.ethereum?.isMetaMask) {
    alert("请安装Metamask扩展");
    return;
  }
  try {
    // 请求用户授权连接钱包
    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
    WalletAddress = accounts;
    metamaskConnected = window.ethereum.isConnected();
    // 后续web3相关操作放在授权完成后执行
    const allAccounts = await web3.eth.getAccounts();
    console.log(allAccounts);
  } catch (error) {
    console.error("钱包连接失败：", error);
  }
}

3. 解决Brave浏览器钱包冲突 #

如果用户同时开启了Brave原生钱包和Metamask，可引导用户修改Brave默认钱包设置，彻底解决注入冲突：打开Brave设置 -> 找到Web3设置项 -> 默认加密货币钱包选择「Metamask」即可。

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