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

Question

I was trying implement a ConnectWalletButton demo with "Rainbowkit"+"wagmi"+viem" and when i try "yarn run dev", it promoted me with this

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)

and then i added "@tanstack/query-core" and "@tanstack/react-query" and the error still remained.

I did see query-core in node_modules

here is my "package.json" down below

{
  "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;

I've looked through both Rainbowkit's and Wagmi's community and i still don't have any clue fixing it. Have anyone ever met this error and ended up fixing it? Thank you !

Answer 1

Delete package-log.json or yarn.lock (if have) and then yarn or npm install again. I resolved by this way.