Hydration Errors after "npm init @rainbow-me/rainbowkit@latest"

[devdacian]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.8.1

wagmi Version

0.9.0

Current Behavior

After running "npm init @rainbow-me/rainbowkit@latest" then opening the browser I am greeted with the following 4 attached errors.

3 errors are hydration, one is unhandled runtime error due to no connection. I can get rid of this last error by changing "autoConnect: false" in _app.tsx when configuring the wagmi client, but I'm not sure what to do about the hydration errors.

My understanding is that these hydration errors used to be warnings but were made errors in React 18. From the package.json that was created by rainbowkit init:

"dependencies": {
"@rainbow-me/rainbowkit": "^0.8.1",
"ethers": "^5.0.0",
"next": "^12.1.6",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"wagmi": "^0.9.0"
},
"devDependencies": {
"@types/node": "^17.0.35",
"@types/react": "^18.0.9",
"eslint": "^8.15.0",
"eslint-config-next": "^12.1.6",
"typescript": "^4.7.2"
}

I also noticed that the example @ https://codesandbox.io/s/rainbowkit-nextjs-gz890p is using React 17. Try it on React 18 and see what happens :-)

Expected Behavior

I wouldn't expect to see any errors after using the rainbowkit init, would expect the page to load normally with no errors.

Steps To Reproduce

npm init @rainbow-me/rainbowkit@latest

npm run dev

Browse to http://localhost:3000/

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

No response

Anything else?

[devdacian]

I figured out how to fix this. Change _app.tsx to use Effect hook with empty dependency array so it runs when page loads, use that to set a ready boolean, and use that to conditionally load RainbowKit/Wagmi. Problem solved.

No more hydration errors running on React 18

[DanielSinclair]

@devdacian The noNetwork error is actually because the example API key for alchemyProvider supplied by Alchemy seems to have gone dead. We'll work to get a new API key or deprecate Alchemy in the examples. Just remove this line and exclusively use publicProvider instead.

For the hydration issues, I have been unable to reproduce. What Node version are you using?

[devdacian]

@DanielSinclair I'm using Node 19.3.0, React 18.2.0 & NextJS 13.1.1. My understanding is the hydration errors only started popping up in React 18 (before that they were warnings that no one paid attention to), and that many are still using React 17 so aren't seeing them yet. Using the provided solution I no longer get the errors.

There is a twitter thread around this issue as well where some SEO-related issues are discussed, as this solution can be sub-optimal from an SEO perspective without some additional modification.

[rafinskipg]

+1

[daniel-quadrata]

same issue, using only publicProvider()

[DanielSinclair]

These issues should now be fixed with the latest Wagmi version. Opened #1024 to deprecate the default alchemyProvider key in the create-rainbowkit template as well.