Describe the bug When trying to use WalletConnectConnector with wagmi in latest Next.js 13.1.5 with experimental appDir enabled compiler throws several warnings, saying: Module not found: Can't resolve
Version Looking at package-lock there're: "@walletconnect/ethereum-provider": "^1.8.0", "@walletconnect/universal-provider": "^2.2.1",
package.json { "name": "my-app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "ethers": "^5.7.2", "next": "^13.1.5", "react": "18.2.0", "react-dom": "18.2.0", "wagmi": "^0.11.0" }, "devDependencies": { "@types/node": "18.0.1", "@types/react": "18.0.14", "@types/react-dom": "18.0.5", "eslint": "8.19.0", "eslint-config-next": "12.2.0", "typescript": "^4.9.4" } }
To Reproduce Steps to reproduce the behavior: minimal reproducible example
warn - ./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
Module not found: Can't resolve 'lokijs' in '/home/runner/walletconnect-issue/node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js'
Import trace for requested module:
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/index.js
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/index.js
./node_modules/@walletconnect/sign-client/node_modules/@walletconnect/core/dist/index.cjs.js
./node_modules/@walletconnect/sign-client/dist/index.cjs.js
./node_modules/@walletconnect/universal-provider/dist/index.cjs.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./app/(components)/WagmiProvider.tsx
./node_modules/cross-fetch/node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '/home/runner/walletconnect-issue/node_modules/cross-fetch/node_modules/node-fetch/lib'
Import trace for requested module:
./node_modules/cross-fetch/node_modules/node-fetch/lib/index.js
./node_modules/cross-fetch/dist/node-ponyfill.js
./node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/http.js
./node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/index.js
./node_modules/@walletconnect/ethereum-provider/dist/cjs/index.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./app/(components)/WagmiProvider.tsx
./node_modules/pino/lib/tools.js
Module not found: Can't resolve 'pino-pretty' in '/home/runner/walletconnect-issue/node_modules/pino/lib'
Import trace for requested module:
./node_modules/pino/lib/tools.js
./node_modules/pino/pino.js
./node_modules/@walletconnect/universal-provider/dist/index.cjs.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./app/(components)/WagmiProvider.tsx
Expected behavior No warns in the console
I had a similar problem if not the same, after attempting a next 12 > 13 transition today.
No error showed on the client console just only on VS console. UI appears to work as should so is this a @ wagmi/@ walletconnect update needed to combat the below error?
warn - ./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
Module not found: Can't resolve 'lokijs' in '...\y-next13\node_modules\@walletconnect\keyvaluestorage\dist\cjs\node-js'
Import trace for requested module:
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/index.js
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/index.js
./node_modules/@walletconnect/core/dist/index.cjs.js
./node_modules/@walletconnect/sign-client/dist/index.cjs.js
./node_modules/@walletconnect/universal-provider/dist/index.cjs.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./node_modules/@rainbow-me/rainbowkit/dist/index.js
./src/components/header.tsx
./src/app/layout.tsx
./node_modules/cross-fetch/node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '...\y-next13\node_modules\cross-fetch\node_modules\node-fetch\lib'
Import trace for requested module:
./node_modules/cross-fetch/node_modules/node-fetch/lib/index.js
./node_modules/cross-fetch/dist/node-ponyfill.js
./node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/http.js
./node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/index.js
./node_modules/@walletconnect/universal-provider/dist/index.cjs.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./node_modules/@rainbow-me/rainbowkit/dist/index.js
./src/components/header.tsx
./src/app/layout.tsx
./node_modules/pino/lib/tools.js
Module not found: Can't resolve 'pino-pretty' in '...\y-next13\node_modules\pino\lib'
Import trace for requested module:
./node_modules/pino/lib/tools.js
./node_modules/pino/pino.js
./node_modules/@walletconnect/universal-provider/dist/index.cjs.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./node_modules/@rainbow-me/rainbowkit/dist/index.js
./src/components/header.tsx
./src/app/layout.tsx
Anyway this cured it for me:-
yarn add pino-pretty [email protected] encoding
Will this warning persist in the local environment?
I encountered it initially in local environment. Didn't try adding those packages as @codetaskforce solution states, probably can add those to peer deps?
I'm having this same issue in my local environment. Doesn't seem to affect production builds but the error occurs in the build log as well.
