NetxJs 13, module not found.

[xenoliss]

Hello there, I'm facing some bundling issues when building a NextJs 13 app using rainbowkit.

Here is a simple example:

// page.tsx
"use client";

import "@rainbow-me/rainbowkit/styles.css";

import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import { arbitrumGoerli } from "wagmi/chains";
import { alchemyProvider } from "wagmi/providers/alchemy";

const { chains, provider } = configureChains(
	[arbitrumGoerli],
	[alchemyProvider({ apiKey: "xxxxx" })]
);

const { connectors } = getDefaultWallets({
	appName: "Kibo",
	chains,
});

const wagmiClient = createClient({
	autoConnect: true,
	connectors,
	provider,
});

export default function Home() {
	return (
		<WagmiConfig client={wagmiClient}>
			<RainbowKitProvider chains={chains}>
				<></>
			</RainbowKitProvider>
		</WagmiConfig>
	);
}

When compiling, this outputs the following to the console:

wait  - compiling /page (client and server)...
warn  - ./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
Module not found: Can't resolve 'lokijs' in '/com.docker.devenvironments.code/kibo/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
./app/page.tsx

./node_modules/cross-fetch/node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '/com.docker.devenvironments.code/kibo/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
./node_modules/@rainbow-me/rainbowkit/dist/index.js
./app/page.tsx

./node_modules/pino/lib/tools.js
Module not found: Can't resolve 'pino-pretty' in '/com.docker.devenvironments.code/kibo/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
./app/page.tsx

Here is my packages.json:

"dependencies": {
	"@rainbow-me/rainbowkit": "^0.11.0",
	"@types/node": "18.14.2",
	"@types/react": "18.0.28",
	"@types/react-dom": "18.0.11",
	"eslint": "8.35.0",
	"eslint-config-next": "13.2.1",
	"ethers": "^5.7.2",
	"next": "13.2.1",
	"react": "18.2.0",
	"react-dom": "18.2.0",
	"typescript": "4.9.5",
	"wagmi": "^0.11.7"
}

Any idea how to fix this ? Thanks a lot !

[slimshreydy]

Also running into this issue!