magiziz
commented
9 months ago @nfadeluca Thanks for raising this issue!
I've taken a look at your code and a few things that needs to be done to solve this issue:
- You've not added
projectIdinto yourgetDefaultConfigfunction. Make sure to do that first ✅. - Import
'@rainbow-me/rainbowkit/styles.css'at the top of yourlayout.tsxfile to get RainbowKit styles. - You don't need to throw an error if
projectIdis not specified. We do that for you anyways ingetDefaultConfig. - Since you're using next.js app router it will include conflicts with with server components and client components. In this case you should import
'use client'at the top of yourContextProvidercomponent to make sure it's only rendered on client side.
Here is the final code for you to try:
layout.tsx
import "@rainbow-me/rainbowkit/styles.css";
import type { Metadata } from 'next'
import { headers } from 'next/headers'
import { cookieToInitialState } from 'wagmi'
import { config } from '@/blockchain/config'
import { ContextProvider } from '@/context'
import '@/app/globals.css';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app'
}
type LayoutProps = {
children: React.ReactNode;
};
const RootLayout: React.FC<LayoutProps> = ({children}) => {
const initialState = cookieToInitialState(config, headers().get('cookie'))
return (
<html lang="en">
<body>
<ContextProvider initialState={initialState}>
{children}
</ContextProvider>
</body>
</html>
)
}
export default RootLayout;context/index.tsx
"use client";
import React, { ReactNode } from 'react'
import { config } from '@/blockchain/config'
import {
RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { State, WagmiProvider } from 'wagmi'
// Setup queryClient
const queryClient = new QueryClient()
export function ContextProvider({
children,
initialState
}: {
children: ReactNode
initialState?: State
}) {
return (
<WagmiProvider config={config} initialState={initialState}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>
{children}
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
)
}config/index.ts
import { cookieStorage, createStorage } from 'wagmi'
import {
getDefaultConfig,
Chain,
} from '@rainbow-me/rainbowkit';
import {
mainnet,
polygon,
optimism,
arbitrum,
base,
zora,
goerli,
} from 'wagmi/chains';
export const projectId = process.env.PROJECT_ID;
// Local avax custom chain
const avalanche = {
...
} as const satisfies Chain
// Create wagmiConfig
export const config = getDefaultConfig({
appName: "App",
chains: [avalanche, mainnet, goerli, polygon, optimism, arbitrum, base, zora],
ssr: true,
projectId,
storage: createStorage({
storage: cookieStorage
})
})Note: You might also get some polyfill errors so make sure to have this fallback in your next.config.mjs file.
Also if it's helpful please refer to our app router example here. Let me know if everything works 🙏
nfadeluca
agonist
radulff
smauret
zwergdev
songkeys
nakedfool
knight174
arewageek
Is there an existing issue for this?
RainbowKit Version
2.0.0
wagmi Version
2.5.7
Current Behavior
In a next v14.0.4 project setup with wagmi 2.5.7 and rainbowkit 2.0.0.
Upon page compilation finishing, the error displays:
Expected Behavior
getDefaultConfig should work as per the docs.
Steps To Reproduce
I have a config file in /config/index.ts:
And I use it in a context provider in /context/index.ts:
And this context provider is finally used in the root layout:
Ran using npm run dev
Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)
No response
Anything else?
My directory looks like so: