While working on implementing a ConnectWalletButton demo using "Rainbowkit"+"wagmi"+viem", I encountered an issue when running "yarn run dev" that resulted in the following error:
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)
...
I attempted to resolve this error by adding "@tanstack/query-core" and "@tanstack/react-query", but it still persisted.
I did confirm that query-core is present in node_modules.
Here is my "package.json":
{
"name": "nextjs-smartcontract-lottery-fcc3",
"version": "0.1.0",
...
}
"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 have searched through both Rainbowkit's and Wagmi's communities for a solution but have come up empty-handed. If anyone has experienced and resolved this error before, I would greatly appreciate any guidance or advice. Thank you!