[Feature]: React 18 Support

[tom-sherman]

What is the new or updated feature that you are suggesting?

Support React 18 features, perhaps this issue can be used as a tracking issue?

Why should this feature be included?

React 18 is the future...

[tom-sherman]

✅ Things I've tried so far that seem to work:

• Replacing ReactDOM.render with ReactDOM.createRoot
• useId returns an identifier that appears to be stable across client and server

[tom-sherman]

❌ Can't install the beta on npm 7 because of peer dep mismatch with @remix-run/react

Npm error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @remix-run/react@1.0.4
npm ERR! Found: react@18.0.0-beta-149b420f6-20211119
npm ERR! node_modules/react
npm ERR!   react@"18.0.0-beta-149b420f6-20211119" from the root project
npm ERR!   peer react@"18.0.0-beta-149b420f6-20211119" from react-dom@18.0.0-beta-149b420f6-20211119
npm ERR!   node_modules/react-dom
npm ERR!     react-dom@"18.0.0-beta-149b420f6-20211119" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@">=16.8" from @remix-run/react@1.0.4
npm ERR! node_modules/@remix-run/react
npm ERR!   @remix-run/react@"^1.0.4" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@">=16.8" from @remix-run/react@1.0.4
npm ERR!   node_modules/@remix-run/react
npm ERR!     @remix-run/react@"^1.0.4" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[tom-sherman]

⚠️ It appeats Remix needs some tweaks on how it inserts scripts and links into the document reactwg/react-18#114 and reactwg/react-18#108

I'm not completely clear on where this work would be done, it's possible that some of these practices would need to be baked into Remix and others left up to the user to do inside of the entry module.

[tom-sherman]

❌ 🐛 I think I've found a bug.

1. Run https://github.com/tom-sherman/remix-react-18
2. Navigate to /demos/params/shh-its-a-secret

Uncaught Error: An error occurred during hydration. The server HTML was replaced with client content
    at throwOnHydrationMismatchIfConcurrentMode (react-dom.development.js:14450)
    at tryToClaimNextHydratableInstance (react-dom.development.js:14462)
    at updateHostComponent$1 (react-dom.development.js:20606)
    at beginWork (react-dom.development.js:22348)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4126)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4175)
    at invokeGuardedCallback (react-dom.development.js:4239)
    at beginWork$1 (react-dom.development.js:27123)
    at performUnitOfWork (react-dom.development.js:26288)
    at workLoopSync (react-dom.development.js:26198)

[ivosabev]

I keep getting the error references in #2564 with remix@1.4.3 it comes from the hydrate function call in entry.client.tsx.

Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

[sergiomeneses]

I keep getting the error references in #2564 with remix@1.4.3 it comes from the hydrate function call in entry.client.tsx.

Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

Same here using remix@1.5.1, floowing this (https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html) i get no warnings

[chaance]

Closing this as there should be no issues running React 18. Our templates do still install 17 by default, so you need to follow the upgrade guide until we decide to upgrade by default. If you have any specific problems with React 18, please open a new issue!

[megawebmaster]

@chaance the app doesn't work with hydrateRoot API (with naive change), so how should we follow the upgrade guide?

[chaance]

I upgraded to React 18 using hydrateRoot in this repro and didn't have any issues. If you have a project that doesn't work can you point it to me? I've been having a bunch of issues with Stackblitz today so anything I could run locally would be helpful. https://github.com/chaance/remix-repros/tree/main/react-18

[ivosabev]

I confirm this works:
https://github.com/chaance/remix-repros/blob/main/react-18/app/entry.client.tsx

[chaance]

There's also an unreleased update in React that should fix issues with hydrating the root document. If you install next instead of 18.1.0, this may also fix any remaining issues that may occur.

facebook/react#24523

npm i react@next react-dom@next

[megawebmaster]

@chaance - I'll take a look in in the evening and let you know! Thanks for the repro 👍

[frontsideair]

React 18.2.0 is released with the fix, so I think there should be no more blockers.

[nareshbhatia]

Hi @chaance, I tried to run your repo with 18.1.0 and 18.2.0. I am seeing the following warning and error messages in the console. Not sure if I am doing something wrong:

Also to add, the behavior with 18.1.0 and 18.2.0 is somewhat different. With 18.1.0, the main page appears for about 1 second and then disappears - I see a white screen. With 18.2.0, the app is more stable - the main page does not disappear. Regardless, the above errors appear in the console regardless of version 18.1.0 or 18.2.0.

[benjaminhonorio]

Hi @chaance, I tried to run your repo with 18.1.0 and 18.2.0. I am seeing the following warning and error messages in the console. Not sure if I am doing something wrong:

Also to add, the behavior with 18.1.0 and 18.2.0 is somewhat different. With 18.1.0, the main page appears for about 1 second and then disappears - I see a white screen. With 18.2.0, the app is more stable - the main page does not disappear. Regardless, the above errors appear in the console regardless of version 18.1.0 or 18.2.0.

I've seen these errors too. Go to a incognito mode in your browser and check if you see them there. If not, then it's probably a extension like dark mode (my case), apollo dev tools, etc that you may have installed and those are the ones injecting some things in the dom causing the mismatch. I've found some discussion #24430. My specific case was a dark mode extension in chrome

[nareshbhatia]

@benjaminhonorio, you hit the nail on the head! That was exactly the issue. The errors go away in an Incognito window. Thanks so much for your help.

[jonschlinkert]

The Apollo Client Devtools chrome extension causes this error for me.