Vite构建wagmi与RainbowKit项目时node_modules出现TS编译错误

在Vite构建过程中遇到多个TypeScript编译错误，这些错误源自node_modules中的类型声明，部分错误信息如下：

node_modules/@rainbow-me/rainbowkit/dist/wallets/connectorsForWallets.d.ts:2:78 - error TS2304: Cannot find name 'Connector'.

2 export declare const connectorsForWallets: (walletList: WalletList) => () => Connector[];
                                                                               

node_modules/@web3modal/core/dist/_types/src/controllers/ClientCtrl.d.ts:5:22 - error TS2307: Cannot find module '@web3modal/ethereum' or its corresponding type declarations.

5     client(): import("@web3modal/ethereum").EthereumClient;
                       ~~~~~~~~~~~~~~~~~~~~~

node_modules/viem/dist/types/clients/transports/webSocket.d.ts:2:15 - error TS2595: 'WebSocket' can only be imported by using a default import.

2 import type { WebSocket } from 'isomorphic-ws';

当前tsconfig.json配置：

{
  "compilerOptions": {
    "outDir": "dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es2015",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*"
  ]
}

已确认导入所有必要依赖，但错误仍存在，希望在不忽略库检查的情况下完成项目构建。

1. 修复isomorphic-ws类型导入问题 #

针对viem中的WebSocket导入错误，先安装isomorphic-ws的类型声明包：

npm install @types/isomorphic-ws --save-dev

你已经开启了allowSyntheticDefaultImports和esModuleInterop，这两个配置能帮TypeScript兼容默认导入格式，安装类型包后该错误应该能解决。

2. 补全@web3modal依赖关联 #

@web3modal/core依赖@web3modal/ethereum的类型定义，确认是否安装了这个包：

npm install @web3modal/ethereum --save

如果已经安装过，删除node_modules和锁文件后重新安装，确保依赖版本匹配：

rm -rf node_modules package-lock.json
npm install

3. 修正RainbowKit的Connector类型缺失 #

RainbowKit里的Connector类型来自wagmi，先确认安装了wagmi：

npm install wagmi --save

另外要注意RainbowKit和wagmi的版本兼容性，比如RainbowKit v1.x需要搭配wagmi v0.12及以上版本，版本不匹配也会导致类型缺失。

4. 调整tsconfig优化类型解析 #

在tsconfig.json的compilerOptions里添加以下配置，增强类型解析能力：

{
  "compilerOptions": {
    // 保留原有配置
    "types": ["node", "isomorphic-ws"],
    "resolveJsonModule": true,
    "strict": false // 暂时关闭strict模式排查问题，后续稳定后可逐步开启
  }
}

5. 检查Vite配置的tsconfig路径 #

在vite.config.ts里确认tsconfig路径指向正确，避免因配置文件读取错误导致的类型问题：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  tsconfig: './tsconfig.json'
});

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