Warning: ReactDOM.hydrate is no longer supported in React 18

[nath1as]

What version of Remix are you using?

1.3.3

Steps to Reproduce

basic app
yarn run dev

Expected Behavior

Remix uses hydrateRoot and behaves as if it's running React 18.

Actual Behavior

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

[machour]

Remix 1.3.3 was released prior to React 18 :)

The only part using hydrate should be your app/entry.client.tsx file, which you can update at your convenience.

[MichaelDeBoey]

Re-opening because it would be good to keep track of this as long as we don't support React v18

[nareshbhatia]

I tried updating app/entry.client.tsx like this, but it is not working:

import { RemixBrowser } from '@remix-run/react';
import { hydrateRoot } from 'react-dom/client';
hydrateRoot(document, <RemixBrowser />);

I get this error in the console:

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

The suggestion in React docs is to change hydrate as follows:

import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = hydrateRoot(container, <App tab="home" />);

This is slightly different compared to my remix code where I am passing the entire document to hydrateRoot - that's how the original Remix code was structured.

[chaance]

I'm going to close this again so we can consolidate problems with React 18 to a single issue, as this is very much a WIP already. Let's keep discussion of those issues in #577

[TakenHiduk]

How about this?

// entry.client.tsx
import { RemixBrowser } from "@remix-run/react";
import { hydrateRoot } from "react-dom/client";

hydrateRoot(document, <RemixBrowser />);

// package.json
{
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev": "remix dev",
    "start": "remix-serve build"
  },
  "dependencies": {
    "@remix-run/node": "^1.5.1",
    "@remix-run/react": "^1.5.1",
    "@remix-run/serve": "^1.5.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.5.1",
    "@remix-run/eslint-config": "^1.5.1",
    "@types/react": "^18.0.12",
    "@types/react-dom": "^18.0.5",
    "eslint": "^8.15.0",
    "typescript": "^4.6.4"
  },
  "engines": {
    "node": ">=14"
  }
}