Module not found: Can't resolve 'lokijs' in '/home/richard/charity/rainbow-test/node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js'; Module not found: Can't resolve 'encoding' in '/home/richard/charity/rainbow-test/node_modules/node-fetch/lib'; Module not found: Can't resolve 'pino-pretty' in '/home/richard/charity/rainbow-test/node_modules/pino/lib'

[linghuccc]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

1.0.4

wagmi Version

1.3.5

Current Behavior

Module not found: Can't resolve 'lokijs' in '/home/richard/charity/rainbow-test/node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js';
Module not found: Can't resolve 'encoding' in '/home/richard/charity/rainbow-test/node_modules/node-fetch/lib';
Module not found: Can't resolve 'pino-pretty' in '/home/richard/charity/rainbow-test/node_modules/pino/lib'

Expected Behavior

No error is reported

Steps To Reproduce

First run below command to create a new NextJs application:
npx create-next-app@latest

Then run below command to manually install RainbowKit:
npm install @rainbow-me/rainbowkit wagmi viem

Step 3: import, configure, and wrap providers as in RainbowKit Next example (https://github.com/rainbow-me/rainbowkit/tree/main/examples/with-next-app);

Step 4: update parameter projectId from 'YOUR_PROJECT_ID' to my own;

Step 5: edit next.config.js file as instructed in post (#1244)

Step 6: run below command:
npm run dev

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://codesandbox.io/p/github/linghuccc/rainbowkit_pino_error/main?workspaceId=54d5c3e7-96fe-41fc-b2e2-ab46b92fb8d9

Anything else?

The error has 3 parts: lokijs, encoding and pino-pretty.

lokijs is reported in issue post #1343 ; encoding seems to be installed in official example, mentioned in issue post #1243 ; and there is no mention of pino-pretty anywhere.

I managed to make the issue disappear by edit next.config.js file:
webpack: (config) => {
config.resolve.fallback = { fs: false, net: false, tls: false }
config.externals.push('pino-pretty', 'lokijs', 'encoding')
return config
},

But I am not sure if this is the correct way.

[DanielSinclair]

This seems to be an issue with the Next 13 App Router, so the Webpack externals approach described in WalletConnect/walletconnect-monorepo#1908 is suitable. Opened #1369 to update our example and docs.