错误：找不到模块“@tanstack/query-core”

Question

我正在尝试使用“Rainbowkit”+“wagmi”+viem”实现 ConnectWalletButton 演示，当我尝试“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”，但错误仍然存在。

下面是我的“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;

我浏览了 Rainbowkit 和 Wagmi 的社区，但仍然没有任何解决它的线索。 有没有人遇到过这个错误并最终修复了它？ 谢谢！

Answer 1

删除package-log.json或yarn.lock（如果有），然后再次安装yarn或npm。我就是这样解决的。