Web3Modal升级后TypeScript项目Wagmi连接器类型不兼容报错

问题代码 #

import {
  EthereumClient,
  w3mConnectors,
  w3mProvider,
} from '@web3modal/ethereum';
import { polygonMumbai } from 'wagmi/chains';
import './index.css';
import { WagmiConfig } from 'wagmi';
import { createConfig, configureChains } from 'wagmi';

const projectId = window._env_.REACT_APP_WAGMI_CLIENT_ID as string;

export const chains = [polygonMumbai];
const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
export const wagmiClient = createConfig({
  autoConnect: true,
  connectors: w3mConnectors({ chains, projectId }),
  publicClient,
});

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);

root.render(
  <React.StrictMode>
    <WagmiConfig config={wagmiClient}>
      <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>
    </WagmiConfig>
  </React.StrictMode>,
);

依赖版本 #

"dependencies": {
  "@types/react": "^18.2.8",
  "@types/react-dom": "^18.2.4",
  "@web3modal/ethereum": "2.6.2",
  "@web3modal/react": "2.6.2",
  "react": "^18.2.0",
  "react-scripts": "5.0.1",
  "typescript": "^5.1.3",
  "viem": "1.2.5",
  "wagmi": "1.3.3"
}

编译报错 #

Failed to compile.

TS2322: Type '(WalletConnectConnector | InjectedConnector)[]' is not assignable to type '(() => Connector<any, any>[]) | Connector<any, any>[] | undefined'.
  Type '(WalletConnectConnector | InjectedConnector)[]' is not assignable to type 'Connector<any, any>[]'.
    Type 'WalletConnectConnector | InjectedConnector' is not assignable to type 'Connector<any, any>'.
      Type 'WalletConnectConnector' is not assignable to type 'Connector<any, any>'.
        Property 'storage' is protected but type 'Connector<Provider, Options>' is not a class derived from 'Connector<Provider, Options>'.
    28 | export const wagmiClient = createConfig({
    29 |   autoConnect: true,
  > 30 |   connectors: w3mConnectors({ chains, projectId }),
       |   ^^^^^^^^^^
    31 |   publicClient,
    32 | });
    33 |

解决方案 #

1. 对齐依赖版本（推荐） #

报错根源是viem和wagmi版本与@web3modal/ethereum不兼容：@web3modal/ethereum@2.6.2要求viem^1.3.0和wagmi^1.3.0，但当前使用的viem@1.2.5低于最低要求，导致类型定义冲突。

修改package.json中的依赖版本：

"dependencies": {
  // ...其他依赖不变
  "viem": "^1.3.10",
  "wagmi": "^1.4.0"
}

执行以下命令重新安装依赖：

rm -rf node_modules package-lock.json
npm install

2. 临时类型断言（不推荐） #

如果暂时无法升级依赖，可以通过类型断言绕过类型检查，但会失去TypeScript的类型安全保障：

export const wagmiClient = createConfig({
  autoConnect: true,
  connectors: w3mConnectors({ chains, projectId }) as unknown as Connector<any, any>[],
  publicClient,
});

3. 补充Web3Modal完整初始化 #

之前代码导入了EthereumClient但未使用，需补全初始化步骤：

// 在创建wagmiClient后添加
export const ethereumClient = new EthereumClient(wagmiClient, chains);

然后在App组件中添加Web3Modal入口：

import { Web3Modal } from '@web3modal/react';

function App() {
  return (
    <>
      {/* 你的应用内容 */}
      <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
    </>
  );
}

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