Upgrade to React 18 support with hydrateRoot

[colesanderson]

I tried to upgrade to React 18 with hydrateRoot and got a few errors:

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

[colesanderson]

I am only getting error when runnning ntl dev. No error when running with npm run dev:remix

[colesanderson]

[colesanderson]

That is the changes I made:

[taty2010]

Hi @colesanderson! Thank you for your patience while we look into this issue.

When following the steps that you outlined, we were able to reproduce the hydration errors and resolve them by doing the steps below:

1. Delete node_modules file

#2. re-install dependencies
npm install

#3.  Run local build
netlify build

#4. Run dev environment 
netlify dev

After going through those steps the hydration related errors should now be gone.

If for some reason you are still running into this error, instead of just deleting the node_modules you can clean your working directory to remove all un-tracked files. Before running the command please make sure to backup your env file or any other un-tracked files that you would like to preserve.

#1. this will remove everything listed in .gitignore
git clean -dfx 

#2. re-install dependencies
npm install

3. add your .env file back in with the required env variables for supabase

#4. if you have an existing site already you will use link otherwise you will need to initialize your project
netlify init or netlify link

#5 Run local build
netlify build

#6 Run dev environment
netlify dev

I hope this helps, if the issue still persists please let us know.

[colesanderson]

@taty2010 Thank you for getting back to me!

I have followed both steps and still getting the same error in the console.log :(

[taty2010]

@colesanderson thanks for letting us know, are you able to provide us with a link to the repo with the issue so we can dig into this more?

[colesanderson]

Hey @taty2010 sorry for late response, there are not much changes in my repo. It will be super helpful if can upgrade kpop stack to React 18 and I can start new project off kpop stack?

[colesanderson]

That is the changes I pushed.