使用RainbowKit+Wagmi+Viem时@tanstack/query-core找不到问题求助

执行yarn run dev时触发以下运行时错误：

Unhandled Runtime Error
Error: Cannot find module '@tanstack/query-core'

Call Stack
webpackMissingModule
webpack-internal:///(app-pages-browser)/./node_modules/@wagmi/core/dist/esm/query/getBalance.js (6:50)
eval
webpack-internal:///(app-pages-browser)/./node_modules/@wagmi/core/dist/esm/query/getBalance.js (6:145)
(app-pages-browser)/./node_modules/@wagmi/core/dist/esm/query/getBalance.js
file:///home/xly/web3/hh-fc/nextjs-smartcontract-lottery-fcc3/.next/static/chunks/app/page.js (7227:1)
options.factory
file:///home/xly/web3/hh-fc/nextjs-smartcontract-lottery-fcc3/.next/static/chunks/webpack.js (721:31)
__webpack_require__
file:///home/xly/web3/hh-fc/nextjs-smartcontract-lottery-fcc3/.next/static/chunks/webpack.js (37:33)
fn
file:///home/xly/web3/hh-fc/nextjs-smartcontract-lottery-fcc3/.next/static/chunks/webpack.js (376:21)
eval
webpack-internal:///(app-pages-browser)/./node_modules/wagmi/dist/esm/hooks/useBalance.js (5:75)
(app-pages-browser)/./node_modules/wagmi/dist/esm/hooks/useBalance.js
file:///home/xly/web3/hh-fc/nextjs-smartcontract-lottery-fcc3/.next/static/chunks/app/page.js (9823:1)
options.factory
file:///home/xly/web3/hh-fc/nextjs-smartcontract-lottery-fcc3/.next/static/chunks/webpack.js (721:31)
__webpack_require__
file:///home/xly/web3/hh-fc/nextjs-smartcontract-lottery-fcc3/.next/static/chunks/webpack.js (37:33)
fn
file:///home/xly/web3/hh-fc/nextjs-smartcontract-lottery-fcc3/.next/static/chunks/webpack.js (376:21)
eval
webpack-internal:///(app-pages-browser)/./node_modules/@rainbow-me/rainbowkit/dist/index.js (35:64)
(app-pages-browser)/./node_modules/@rainbow-me/rainbowkit/dist/index.js
file:///home/xly/web3/hh-fc/nextjs-smartcontract-lottery-fcc3/.next/static/chunks/app/page.js (6589:1)
options.factory
file:///home/xly/web3/hh-fc/nextjs-smartcontract-lottery-fcc3/.next/static/chunks/webpack.js (721:31)
__webpack_require__
file:///home/xly/web3/hh-fc/nextjs-smartcontract-lottery-fcc3/.next/static/chunks/webpack.js (37:33)
fn
file:///home/xly/web3/hh-fc/nextjs-smartcontract-lottery-fcc3/.next/static/chunks/webpack.js (376:21)
requireModule
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js (156:22)
initializeModuleChunk
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js (1357:0)
resolveModuleChunk
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js (1302:0)
eval
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js (1774:0)

已手动安装@tanstack/query-core和@tanstack/react-query，且node_modules中存在该模块，但错误未消失。

项目配置文件 #

package.json

{
  "name": "nextjs-smartcontract-lottery-fcc3",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@rainbow-me/rainbowkit": "2.0.0-beta.1",
    "@tanstack/query-core": "^5.17.15",
    "@tanstack/react-query": "^5.17.15",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18",
    "viem": "2",
    "wagmi": "2"
  },
  "devDependencies": {
    "eslint": "^8",
    "eslint-config-next": "14.0.4"
  }
}

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false, net: false, tls: false };
    config.externals.push("pino-pretty", "lokijs", "encoding");
    return config;
  },
};

module.exports = nextConfig;

可能的解决方案 #

• 清理缓存并重装依赖：

  rm -rf node_modules .next yarn.lock
  yarn install
  yarn run dev
  

• 统一依赖版本：在package.json中添加resolutions强制锁定@tanstack/query-core版本，避免多版本冲突：

  "resolutions": {
    "@tanstack/query-core": "^5.17.15"
  }
  

  添加后重新执行yarn install。
• 调整Webpack配置：临时移除next.config.js中config.externals.push("pino-pretty", "lokijs", "encoding");这一行，再启动项目排查是否是外部化设置导致模块解析失败。
• 切换稳定版依赖：将RainbowKit和Wagmi从beta/模糊版本改为稳定版本，比如：

  "@rainbow-me/rainbowkit": "^2.0.0",
  "wagmi": "^2.5.7"
  

  重新安装依赖后测试。
• 检查Provider配置：确保在根layout或_app中正确嵌套QueryClientProvider、WagmiProvider和RainbowKitProvider，且QueryClient实例正确初始化。

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