diff --git a/examples/blog-tutorial/package.json b/examples/blog-tutorial/package.json
index c970016f2c5..bc1787f31df 100644
--- 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
index 3eec1fd0a02..d7ef6febb0d 100644
--- 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(, document);
+hydrateRoot(document, );
diff --git a/integration/helpers/node-template/app/entry.server.tsx b/integration/helpers/node-template/app/entry.server.tsx
index aa0aa0978b1..2a3e6678939 100644
--- a/integration/helpers/node-template/app/entry.server.tsx
+++ b/integration/helpers/node-template/app/entry.server.tsx
@@ -1,6 +1,10 @@
+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,
@@ -8,14 +12,34 @@ export default function handleRequest(
responseHeaders: Headers,
remixContext: EntryContext
) {
- let markup = renderToString(
-
- );
+ return new Promise((resolve, reject) => {
+ let didError = false;
+
+ let { pipe, abort } = renderToPipeableStream(
+ ,
+ {
+ onShellReady() {
+ let body = new PassThrough();
- responseHeaders.set("Content-Type", "text/html");
+ responseHeaders.set("Content-Type", "text/html");
- return new Response("" + 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
index e81d1292384..63ecd3e900c 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
"@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",
@@ -75,8 +75,8 @@
"@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": "^18.0.15",
+ "@types/react-dom": "^18.0.6",
"@types/react-test-renderer": "^17.0.1",
"@types/retry": "^0.12.0",
"@types/semver": "^7.3.4",
@@ -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
index 2a9a22a6540..869f5236d6a 100644
--- 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
index fb44f0fbffc..a077f189319 100644
--- 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
index 69330cca95a..f05ce1f888f 100644
--- 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-react/__tests__/setup.ts b/packages/remix-react/__tests__/setup.ts
index fba7a393e92..451031301ac 100644
--- 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/package.json b/packages/remix-react/package.json
index 982d08314e7..7a7c23d85bf 100644
--- 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
index 840b9e0c44f..98814f245f4 100644
--- 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/yarn.lock b/yarn.lock
index af120d1b234..59c0a8816f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2460,7 +2460,7 @@
"@babel/runtime" "^7.14.6"
"@testing-library/dom" "^8.1.0"
-"@testing-library/dom@^8.0.0", "@testing-library/dom@^8.1.0", "@testing-library/dom@^8.11.1":
+"@testing-library/dom@^8.1.0", "@testing-library/dom@^8.11.1":
version "8.11.3"
resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-8.11.3.tgz"
integrity sha512-9LId28I+lx70wUiZjLvi1DB/WT2zGOxUh46glrSNMaWVx849kKAluezVzZrXJfTKKoQTmEOutLes/bHg4Bj3aA==
@@ -2474,6 +2474,20 @@
lz-string "^1.4.4"
pretty-format "^27.0.2"
+"@testing-library/dom@^8.5.0":
+ version "8.16.0"
+ resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-8.16.0.tgz#d6fc50250aed17b1035ca1bd64655e342db3936a"
+ integrity sha512-uxF4zmnLHHDlmW4l+0WDjcgLVwCvH+OVLpD8Dfp+Bjfz85prwxWGbwXgJdLtkgjD0qfOzkJF9SmA6YZPsMYX4w==
+ dependencies:
+ "@babel/code-frame" "^7.10.4"
+ "@babel/runtime" "^7.12.5"
+ "@types/aria-query" "^4.2.0"
+ aria-query "^5.0.0"
+ chalk "^4.1.0"
+ dom-accessibility-api "^0.5.9"
+ lz-string "^1.4.4"
+ pretty-format "^27.0.2"
+
"@testing-library/jest-dom@^5.16.2":
version "5.16.2"
resolved "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.2.tgz"
@@ -2489,14 +2503,14 @@
lodash "^4.17.15"
redent "^3.0.0"
-"@testing-library/react@^12.1.3":
- version "12.1.3"
- resolved "https://registry.npmjs.org/@testing-library/react/-/react-12.1.3.tgz"
- integrity sha512-oCULRXWRrBtC9m6G/WohPo1GLcLesH7T4fuKzRAKn1CWVu9BzXtqLXDDTA6KhFNNtRwLtfSMr20HFl+Qrdrvmg==
+"@testing-library/react@^13.3.0":
+ version "13.3.0"
+ resolved "https://registry.npmjs.org/@testing-library/react/-/react-13.3.0.tgz#bf298bfbc5589326bbcc8052b211f3bb097a97c5"
+ integrity sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==
dependencies:
"@babel/runtime" "^7.12.5"
- "@testing-library/dom" "^8.0.0"
- "@types/react-dom" "*"
+ "@testing-library/dom" "^8.5.0"
+ "@types/react-dom" "^18.0.0"
"@tootallnate/once@1":
version "1.1.2"
@@ -2947,10 +2961,10 @@
resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz"
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
-"@types/react-dom@*", "@types/react-dom@^17.0.9":
- version "17.0.11"
- resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz"
- integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==
+"@types/react-dom@^18.0.0", "@types/react-dom@^18.0.6":
+ version "18.0.6"
+ resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
+ integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
dependencies:
"@types/react" "*"
@@ -2961,7 +2975,7 @@
dependencies:
"@types/react" "*"
-"@types/react@*", "@types/react@^17.0.24":
+"@types/react@*":
version "17.0.24"
resolved "https://registry.npmjs.org/@types/react/-/react-17.0.24.tgz"
integrity sha512-eIpyco99gTH+FTI3J7Oi/OH8MZoFMJuztNRimDOJwH4iGIsKV2qkGnk4M9VzlaVWeEEWLWSQRy0FEA0Kz218cg==
@@ -2970,6 +2984,15 @@
"@types/scheduler" "*"
csstype "^3.0.2"
+"@types/react@^18.0.15":
+ version "18.0.15"
+ resolved "https://registry.npmjs.org/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe"
+ integrity sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==
+ dependencies:
+ "@types/prop-types" "*"
+ "@types/scheduler" "*"
+ csstype "^3.0.2"
+
"@types/resolve@1.17.1":
version "1.17.1"
resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz"
@@ -10477,14 +10500,13 @@ raw-body@2.4.3:
iconv-lite "0.4.24"
unpipe "1.0.0"
-react-dom@^17.0.2:
- version "17.0.2"
- resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
- integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^18.2.0:
+ version "18.2.0"
+ resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+ integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
dependencies:
loose-envify "^1.1.0"
- object-assign "^4.1.1"
- scheduler "^0.20.2"
+ scheduler "^0.23.0"
react-is@^16.8.1:
version "16.13.1"
@@ -10511,13 +10533,12 @@ react-router@6.2.2:
dependencies:
history "^5.2.0"
-react@^17.0.2:
- version "17.0.2"
- resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
- integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@^18.2.0:
+ version "18.2.0"
+ resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+ integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
dependencies:
loose-envify "^1.1.0"
- object-assign "^4.1.1"
read-pkg-up@^7.0.1:
version "7.0.1"
@@ -11047,13 +11068,12 @@ saxes@^5.0.1:
dependencies:
xmlchars "^2.2.0"
-scheduler@^0.20.2:
- version "0.20.2"
- resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz"
- integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.0:
+ version "0.23.0"
+ resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+ integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
dependencies:
loose-envify "^1.1.0"
- object-assign "^4.1.1"
"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
version "5.7.1"