remix-run · jacob-ebey · Aug 3, 2022 · Aug 3, 2022 · Aug 3, 2022 · Aug 3, 2022
diff --git a/.changeset/nasty-cars-care.md b/.changeset/nasty-cars-care.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+React 18 gets more strict with types, this adds a runtime cast to a string for the `<title>` tag value.
diff --git a/examples/blog-tutorial/package.json b/examples/blog-tutorial/package.json
@@ -46,7 +46,7 @@
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/eslint": "^8.4.1",
     "@types/marked": "^4.0.3",

diff --git a/integration/helpers/node-template/app/entry.client.tsx b/integration/helpers/node-template/app/entry.client.tsx
@@ -1,4 +1,4 @@
+import { hydrateRoot } from "react-dom/client";
 import { RemixBrowser } from "@remix-run/react";
-import { hydrate } from "react-dom";
 
-hydrate(<RemixBrowser />, document);
+hydrateRoot(document, <RemixBrowser />);
diff --git a/integration/helpers/node-template/app/entry.server.tsx b/integration/helpers/node-template/app/entry.server.tsx
@@ -1,21 +1,45 @@
+import { PassThrough } from "stream";
+import { renderToPipeableStream } from "react-dom/server";
 import type { EntryContext } from "@remix-run/node";
+import { Response } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
-import { renderToString } from "react-dom/server";
+
+const ABORT_DELAY = 5000;
 
 export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext
 ) {
-  let markup = renderToString(
-    <RemixServer context={remixContext} url={request.url} />
-  );
+  return new Promise((resolve, reject) => {
+    let didError = false;
+
+    let { pipe, abort } = renderToPipeableStream(
+      <RemixServer context={remixContext} url={request.url} />,
+      {
+        onShellReady() {
+          let body = new PassThrough();
 
-  responseHeaders.set("Content-Type", "text/html");
+          responseHeaders.set("Content-Type", "text/html");
 
-  return new Response("<!DOCTYPE html>" + markup, {
-    status: responseStatusCode,
-    headers: responseHeaders,
+          resolve(
+            new Response(body, {
+              status: didError ? 500 : responseStatusCode,
+              headers: responseHeaders,
+            })
+          );
+          pipe(body);
+        },
+        onShellError(err) {
+          reject(err);
+        },
+        onError(error) {
+          didError = true;
+          console.error(error);
+        },
+      }
+    );
+    setTimeout(abort, ABORT_DELAY);
   });
 }
diff --git a/package.json b/package.json
@@ -67,17 +67,17 @@
     "@rollup/plugin-node-resolve": "^11.0.1",
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.3",
+    "@testing-library/react": "^13.3.0",
     "@types/cheerio": "^0.22.22",
     "@types/cross-spawn": "^6.0.2",
     "@types/glob": "7.2.0",
     "@types/jest": "^27.4.1",
     "@types/jsonfile": "^6.1.0",
     "@types/lodash": "^4.14.182",
     "@types/node-fetch": "^2.5.7",
-    "@types/react": "^17.0.24",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-test-renderer": "^17.0.1",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-test-renderer": "^18.0.0",
     "@types/retry": "^0.12.0",
     "@types/semver": "^7.3.4",
     "@types/ssri": "^7.1.0",
@@ -104,8 +104,8 @@
     "npm-run-all": "^4.1.5",
     "prettier": "2.7.1",
     "prompt-confirm": "^2.0.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "remark": "14.0.2",
     "remark-frontmatter": "4.0.1",
     "remark-gfm": "3.0.1",

diff --git a/packages/remix-dev/__tests__/fixtures/replace-remix-imports/package.json b/packages/remix-dev/__tests__/fixtures/replace-remix-imports/package.json
@@ -24,8 +24,8 @@
     "@remix-run/react": "1.3.4",
     "@remix-run/serve": "1.3.4",
     "marked": "^4.0.12",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "remix": "1.3.4",
     "tiny-invariant": "^1.2.0"
   },
@@ -35,12 +35,12 @@
     "@remix-run/eslint-config": "1.3.4",
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.4",
+    "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/eslint": "^8.4.1",
     "@types/marked": "^4.0.2",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^1.2.0",
     "c8": "^7.11.0",
     "cross-env": "^7.0.3",

diff --git a/packages/remix-dev/__tests__/migrations/fixtures/indie-stack/package.json b/packages/remix-dev/__tests__/migrations/fixtures/indie-stack/package.json
@@ -8,14 +8,14 @@
     "@remix-run/node": "*",
     "@remix-run/react": "*",
     "@remix-run/serve": "*",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@remix-run/dev": "*",
     "@types/node": "^17.0.35",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "typescript": "^4.7.4"
   },
   "engines": {

diff --git a/packages/remix-eslint-config/package.json b/packages/remix-eslint-config/package.json
@@ -43,8 +43,8 @@
   "devDependencies": {
     "@types/eslint": "^8.4.1",
     "eslint": "^8.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {

diff --git a/packages/remix-express/tsconfig.json b/packages/remix-express/tsconfig.json
@@ -4,6 +4,7 @@
   "compilerOptions": {
     "lib": ["ES2019", "DOM.Iterable"],
     "target": "ES2019",
+    "skipLibCheck": true,
 
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,

diff --git a/packages/remix-react/__tests__/setup.ts b/packages/remix-react/__tests__/setup.ts
@@ -1,9 +1,3 @@
-// @ts-nocheck
-import * as AbortController from "abort-controller";
-import * as nodeFetch from "@remix-run/node/fetch";
+import { installGlobals } from "@remix-run/node";
 
-global.AbortController = AbortController.AbortController;
-global.Headers = nodeFetch.Headers;
-global.Response = nodeFetch.Response;
-global.Request = nodeFetch.Request;
-global.fetch = nodeFetch;
+installGlobals();
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
@@ -57,7 +57,7 @@ import type { Transition, Fetcher, Submission } from "./transition";
 interface RemixEntryContextType {
   manifest: AssetsManifest;
   matches: BaseRouteMatch<ClientRoute>[];
-  routeData: { [routeId: string]: RouteData };
+  routeData: RouteData;
   actionData?: RouteData;
   pendingLocation?: Location;
   appState: AppState;
@@ -719,7 +719,7 @@ export function Meta() {
         }
 
         if (name === "title") {
-          return <title key="title">{value}</title>;
+          return <title key="title">{String(value)}</title>;
         }
 
         // Open Graph tags use the `property` attribute, while other meta tags

diff --git a/packages/remix-react/package.json b/packages/remix-react/package.json
@@ -22,10 +22,10 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.3",
+    "@testing-library/react": "^13.3.0",
     "abort-controller": "^3.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
     "react": ">=16.8",

diff --git a/packages/remix-server-runtime/package.json b/packages/remix-server-runtime/package.json
@@ -28,8 +28,8 @@
     "@remix-run/web-file": "^3.0.2",
     "@types/jsesc": "^2.5.1",
     "@types/set-cookie-parser": "^2.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
     "react": ">=16.8",

diff --git a/scripts/playground/template/package.json b/scripts/playground/template/package.json
@@ -30,17 +30,17 @@
     "express": "^4.18.1",
     "get-port": "^6.1.2",
     "morgan": "^1.10.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tiny-invariant": "^1.2.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^6.3.1",
     "@remix-run/dev": "^1.4.3",
     "@types/bcryptjs": "^2.4.2",
     "@types/node": "^17.0.31",
-    "@types/react": "^17.0.44",
-    "@types/react-dom": "^17.0.16",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "autoprefixer": "^10.4.7",
     "cross-env": "^7.0.3",
     "npm-run-all": "^4.1.5",