Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hydration Error... React 18 issue? #40

Closed
Pickra opened this issue Aug 5, 2023 · 3 comments
Closed

Hydration Error... React 18 issue? #40

Pickra opened this issue Aug 5, 2023 · 3 comments

Comments

@Pickra
Copy link

Pickra commented Aug 5, 2023 •
edited
Loading

WHAT?!?@?!#?!

I followed the docs to upgrade to remix-development-tools": "2.0.0".
I'm getting errors after upgrading.

Screenshot 2023-08-05 at 2 13 07 PM

Hydration failed because the initial UI does not match what was rendered on the server seems to be the most relevant error...

Versions

"@remix-run/node": "^1.14.3",
"@remix-run/react": "^1.14.1",
"@remix-run/dev": "^1.12.0",
"remix-development-tools": "2.0.0",
node: 18.16.1
npm: 9.5.1

Action Items

  • The consumer uses remix-island; see remix-hydration-fix; Maybe, I haven't looked into it...
  • Add docs about using react v17 or remix-island with Remix-Dev-Tools? Likely...
  • I'm wrong and there's something obvious I need to do? Also likely...
  • Fix on your end? Unlikely, but you know better then me.
@AlemTuzlak
Copy link
Contributor

@Pickra did you wrap your server context with initServer? And your fe with initClient? So in order for route boundaries to work it requires to hook into default exports in route files and add some additional divs, this then requires you to add the div on server and client to prevent issues. One thing that is a red flag for me is 1.14.1 of remix-run/react. The package uses a hook only available from 1.15 so you should upgrade it. And to be frank I haven't tried r17 versions at all, but the error you get is usually cuz you didn't do the initServer part

@Pickra
Copy link
Author

Pickra commented Aug 6, 2023

My bad @AlemTuzlak , user error. All @remix-run deps are on ^1.19.1. i borked the conditionals surrounding hydrate, in entry.client.tsx... Your biz is tight. Thanks for being so cool.
🌈🌈🦄🦄

@Pickra Pickra closed this as completed Aug 6, 2023
@AlemTuzlak
Copy link
Contributor

Glad to hear it! Code on!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Pickra @AlemTuzlak