Skip to content

refactor: update react types to v19 #14241

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

Closed
wants to merge 3 commits into from
Closed

refactor: update react types to v19 #14241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cf791df
chore: update `@types/react` and `@types/react-dom`
hi-ogawa Aug 26, 2025
248793d
chore: fix types
hi-ogawa Aug 26, 2025
ed849c8
chore: update @types/react-test-renderer
hi-ogawa Aug 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions integration/helpers/cloudflare-dev-proxy-template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
"@react-router/dev": "workspace:*",
"@react-router/fs-routes": "workspace:*",
"@react-router/remix-routes-option-adapter": "workspace:*",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"typescript": "^5.1.6",
"vite": "^6.1.0",
"wrangler": "^4.23.0"
Expand Down
1 change: 0 additions & 1 deletion integration/helpers/rsc-parcel-framework/app/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as React from "react";
// @ts-expect-error - no types
import { renderToReadableStream } from "react-dom/server.edge" assert { env: "react-client" };
import {
unstable_routeRSCServerRequest,
Expand Down
4 changes: 2 additions & 2 deletions integration/helpers/rsc-parcel-framework/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
"@types/express": "^5.0.0",
"@types/node": "^22.13.1",
"@types/parcel-env": "0.0.8",
"@types/react-dom": "^19.0.3",
"@types/react": "^19.0.8",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"parcel": "2.15.0",
"parcel-config-react-router-experimental": "1.0.25",
"typescript": "^5.1.6"
Expand Down
4 changes: 2 additions & 2 deletions integration/helpers/rsc-parcel/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
"@types/express": "^5.0.0",
"@types/node": "^22.13.1",
"@types/parcel-env": "0.0.8",
"@types/react-dom": "^19.0.3",
"@types/react": "^19.0.8",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"browserify-zlib": "^0.2.0",
"buffer": "^5.5.0||^6.0.0",
"events": "^3.1.0",
Expand Down
1 change: 0 additions & 1 deletion integration/helpers/rsc-parcel/src/browser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ setServerCallback(

// Get and decode the initial server payload
createFromReadableStream(getRSCStream()).then((payload: RSCPayload) => {
// @ts-expect-error - on 18 types, requires 19.
startTransition(async () => {
const formState =
payload.type === "render" ? await payload.formState : undefined;
Expand Down
2 changes: 1 addition & 1 deletion integration/helpers/rsc-parcel/src/prerender.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// @ts-expect-error - no types for this yet
import { renderToReadableStream as renderHTMLToReadableStream } from "react-dom/server.edge";
import {
unstable_routeRSCServerRequest as routeRSCServerRequest,
Expand Down Expand Up @@ -29,6 +28,7 @@ export async function prerender(
<RSCStaticRouter getPayload={getPayload} />,
{
bootstrapScriptContent,
// @ts-expect-error - no types for this yet
formState,
},
);
Expand Down
4 changes: 2 additions & 2 deletions integration/helpers/rsc-vite-framework/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
"@react-router/fs-routes": "workspace:*",
"@types/express": "^5.0.0",
"@types/node": "^22.13.1",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"@vanilla-extract/css": "^1.17.4",
"@vanilla-extract/vite-plugin": "^5.1.1",
"@vitejs/plugin-react": "^4.5.2",
Expand Down
6 changes: 3 additions & 3 deletions integration/helpers/rsc-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@
"typecheck": "tsc"
},
"devDependencies": {
"@vitejs/plugin-rsc": "0.4.24",
"@types/express": "^5.0.0",
"@types/node": "^22.13.1",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"@vitejs/plugin-react": "^4.5.2",
"@vitejs/plugin-rsc": "0.4.24",
"typescript": "^5.1.6",
"vite": "^6.2.0"
},
Expand Down
1 change: 0 additions & 1 deletion integration/helpers/rsc-vite/src/entry.ssr.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { createFromReadableStream } from "@vitejs/plugin-rsc/ssr";
// @ts-expect-error
import * as ReactDomServer from "react-dom/server.edge";
import {
unstable_RSCStaticRouter as RSCStaticRouter,
Expand Down
4 changes: 2 additions & 2 deletions integration/helpers/vite-5-template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
"@react-router/dev": "workspace:*",
"@react-router/fs-routes": "workspace:*",
"@react-router/remix-routes-option-adapter": "workspace:*",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"eslint": "^8.38.0",
"typescript": "^5.1.6",
"vite": "^5.1.0",
Expand Down
4 changes: 2 additions & 2 deletions integration/helpers/vite-6-template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
"@react-router/dev": "workspace:*",
"@react-router/fs-routes": "workspace:*",
"@react-router/remix-routes-option-adapter": "workspace:*",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"eslint": "^8.38.0",
"typescript": "^5.1.6",
"vite": "^6.1.0",
Expand Down
4 changes: 2 additions & 2 deletions integration/helpers/vite-7-beta-template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
"@react-router/dev": "workspace:*",
"@react-router/fs-routes": "workspace:*",
"@react-router/remix-routes-option-adapter": "workspace:*",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"eslint": "^8.38.0",
"typescript": "^5.1.6",
"vite": "7.0.0-beta.0",
Expand Down
4 changes: 2 additions & 2 deletions integration/helpers/vite-plugin-cloudflare-template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
"@react-router/dev": "workspace:*",
"@react-router/fs-routes": "workspace:*",
"@types/node": "^20.0.0",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"eslint": "^8.38.0",
"typescript": "^5.1.6",
"vite": "^6.1.0",
Expand Down
4 changes: 2 additions & 2 deletions integration/helpers/vite-rolldown-template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
"@react-router/dev": "workspace:*",
"@react-router/fs-routes": "workspace:*",
"@react-router/remix-routes-option-adapter": "workspace:*",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"cross-env": "^7.0.3",
"eslint": "^8.38.0",
"typescript": "^5.1.6",
Expand Down
9 changes: 3 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,6 @@
},
"packageManager": "pnpm@9.10.0",
"resolutions": {
"@types/react": "^18.2.18",
"@types/react-dom": "^18.2.7",
"@types/react-test-renderer": "^18.3.1",
"jsdom": "22.1.0"
},
"dependencies": {
Expand All @@ -59,9 +56,9 @@
"@remix-run/changelog-github": "^0.0.5",
"@types/jest": "^29.5.4",
"@types/jsdom": "^21.1.1",
"@types/react": "^19.0.12",
"@types/react-dom": "^19.0.4",
"@types/react-test-renderer": "^19.0.0",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"@types/react-test-renderer": "^19.1.0",
"@typescript-eslint/eslint-plugin": "^7.5.0",
"@typescript-eslint/parser": "^7.5.0",
"babel-jest": "^29.7.0",
Expand Down
8 changes: 4 additions & 4 deletions packages/react-router/lib/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ export interface RouterProviderProps {
* - If you are rendering in a non-DOM environment, you can import
* `RouterProvider` from `react-router` and ignore this prop
*/
flushSync?: (fn: () => unknown) => undefined;
flushSync?: <R>(fn: () => R) => R;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure what changed but otherwise the typecheck here fails

react-router/packages/react-router/lib/rsc/browser.tsx

Line 817 in ed849c8

<RouterProvider router={router} flushSync={ReactDOM.flushSync} />

I updated a type to align with ReactDOM.flushSync https://github.com/DefinitelyTyped/DefinitelyTyped/blob/f2116ac0a107a3a2ac757c78347aa3a59c27e848/types/react-dom/index.d.ts#L17

/**
* An error handler function that will be called for any loader/action/render
* errors that are encountered in your application. This is useful for
Expand Down Expand Up @@ -654,7 +654,7 @@ export function MemoryRouter({
initialEntries,
initialIndex,
}: MemoryRouterProps): React.ReactElement {
let historyRef = React.useRef<MemoryHistory>();
let historyRef = React.useRef<MemoryHistory>(undefined);
if (historyRef.current == null) {
historyRef.current = createMemoryHistory({
initialEntries,
Expand Down Expand Up @@ -1541,8 +1541,8 @@ export function createRoutesFromChildren(
): RouteObject[] {
let routes: RouteObject[] = [];

React.Children.forEach(children, (element, index) => {
if (!React.isValidElement(element)) {
React.Children.forEach<any>(children, (element, index) => {
if (!React.isValidElement<any>(element)) {
Comment on lines +1544 to +1545
Copy link
Contributor Author

@hi-ogawa hi-ogawa Aug 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is related to the breaking change of the default generic from ReactElement<any> to ReactElement<unknown>. For now, I opted for adding some any. Otherwise it becomes element.props: unknown and typecheck fails with a following code like element.props.children. This change gives element: ReactElement<any> and thus element.props: any to align with previous typing.

// Ignore non-elements. This allows people to more easily inline
// conditionals in their route config.
return;
Expand Down
4 changes: 2 additions & 2 deletions packages/react-router/lib/dom/lib.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -904,7 +904,7 @@ export function BrowserRouter({
children,
window,
}: BrowserRouterProps) {
let historyRef = React.useRef<BrowserHistory>();
let historyRef = React.useRef<BrowserHistory>(undefined);
if (historyRef.current == null) {
historyRef.current = createBrowserHistory({ window, v5Compat: true });
}
Expand Down Expand Up @@ -969,7 +969,7 @@ export interface HashRouterProps {
* for client-side routing.
*/
export function HashRouter({ basename, children, window }: HashRouterProps) {
let historyRef = React.useRef<HashHistory>();
let historyRef = React.useRef<HashHistory>(undefined);
if (historyRef.current == null) {
historyRef.current = createHashHistory({ window, v5Compat: true });
}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-router/lib/dom/ssr/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ interface PrefetchHandlers {
export function usePrefetchBehavior<T extends HTMLAnchorElement>(
prefetch: PrefetchBehavior,
theirElementProps: PrefetchHandlers,
): [boolean, React.RefObject<T>, PrefetchHandlers] {
): [boolean, React.RefObject<T | null>, PrefetchHandlers] {
let frameworkContext = React.useContext(FrameworkContext);
let [maybePrefetch, setMaybePrefetch] = React.useState(false);
let [shouldPrefetch, setShouldPrefetch] = React.useState(false);
Expand Down
5 changes: 3 additions & 2 deletions packages/react-router/lib/dom/ssr/routes-test-stub.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,8 +125,9 @@ export function createRoutesStub(
hydrationData,
future,
}: RoutesTestStubProps) {
let routerRef = React.useRef<ReturnType<typeof createMemoryRouter>>();
let frameworkContextRef = React.useRef<FrameworkContextObject>();
let routerRef =
React.useRef<ReturnType<typeof createMemoryRouter>>(undefined);
let frameworkContextRef = React.useRef<FrameworkContextObject>(undefined);

if (routerRef.current == null) {
frameworkContextRef.current = {
Expand Down
4 changes: 2 additions & 2 deletions packages/react-router/lib/router/router.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3557,7 +3557,7 @@ export function createStaticHandler(
skipLoaderErrorBubbling,
skipRevalidation,
dataStrategy,
generateMiddlewareResponse: generateMiddlewareResponse,
generateMiddlewareResponse,
}: Parameters<StaticHandler["query"]>[1] = {},
): Promise<StaticHandlerContext | Response> {
let url = new URL(request.url);
Expand Down Expand Up @@ -3831,7 +3831,7 @@ export function createStaticHandler(
routeId,
requestContext,
dataStrategy,
generateMiddlewareResponse: generateMiddlewareResponse,
generateMiddlewareResponse,
}: Parameters<StaticHandler["queryRoute"]>[1] = {},
): Promise<any> {
let url = new URL(request.url);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-router/lib/rsc/browser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export function createCallServer({

if (payload.rerender) {
React.startTransition(
// @ts-expect-error - We have old react types that don't know this can be async
//
async () => {
const rerender = await payload.rerender;
if (!rerender) return;
Expand Down
4 changes: 2 additions & 2 deletions playground/framework-express/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
"@types/compression": "^1.7.5",
"@types/express": "^4.17.20",
"@types/morgan": "^1.9.9",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"cross-env": "^7.0.3",
"typescript": "^5.1.6",
"vite": "^6.1.0",
Expand Down
4 changes: 2 additions & 2 deletions playground/framework-rolldown-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
},
"devDependencies": {
"@react-router/dev": "workspace:*",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"typescript": "^5.1.6",
"vite": "npm:rolldown-vite@6.3.0-beta.3",
"vite-tsconfig-paths": "^4.2.1"
Expand Down
4 changes: 2 additions & 2 deletions playground/framework-spa/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
},
"devDependencies": {
"@react-router/dev": "workspace:*",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"typescript": "^5.1.6",
"vite": "^6.1.0",
"vite-tsconfig-paths": "^4.2.1"
Expand Down
4 changes: 2 additions & 2 deletions playground/framework-vite-5/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
},
"devDependencies": {
"@react-router/dev": "workspace:*",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"typescript": "^5.1.6",
"vite": "^5.1.0",
"vite-tsconfig-paths": "^4.2.1"
Expand Down
4 changes: 2 additions & 2 deletions playground/framework-vite-7-beta/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
},
"devDependencies": {
"@react-router/dev": "workspace:*",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"typescript": "^5.1.6",
"vite": "7.0.0-beta.0",
"vite-tsconfig-paths": "^4.2.1"
Expand Down
4 changes: 2 additions & 2 deletions playground/framework/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
},
"devDependencies": {
"@react-router/dev": "workspace:*",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"typescript": "^5.1.6",
"vite": "^6.1.0",
"vite-tsconfig-paths": "^4.2.1"
Expand Down
4 changes: 2 additions & 2 deletions playground/middleware/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
"@types/express-serve-static-core": "^5.0.6",
"@types/morgan": "^1.9.9",
"@types/node": "^20.0.0",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"tsx": "^4.19.3",
"typescript": "^5.1.6",
"vite": "^6.0.0",
Expand Down
1 change: 0 additions & 1 deletion playground/rsc-parcel-framework/app/routes/_index/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export function ServerComponent({ loaderData }: Route.ComponentProps) {
<h1 className="home__heading">Home</h1>
<p>This is the home page.</p>
<p>loaderData: {loaderData}</p>
{/* @ts-expect-error React types for the repo are set to v18 */}
<form action={log}>
<button type="submit">Submit</button>
</form>
Expand Down
3 changes: 0 additions & 3 deletions playground/rsc-parcel-framework/app/routes/optimistic/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
"use client";

import {
// @ts-expect-error React types for the repo are set to v18
useOptimistic,
} from "react";
import { useHydrated } from "remix-utils/use-hydrated";
Expand All @@ -17,13 +16,11 @@ export function ToggleLikedForm({

const [optimisticLiked, setOptimisticLiked] = useOptimistic(liked);
const toggleLikedActionOptimistic = async () => {
// @ts-expect-error React types for the repo are set to v18
setOptimisticLiked((liked) => !liked);
await toggleLikedAction();
};

return (
// @ts-expect-error React types for the repo are set to v18
<form action={hydrated ? toggleLikedActionOptimistic : toggleLikedAction}>
<button type="submit" className="btn">
{optimisticLiked ? "Unlike" : "Like"}
Expand Down
4 changes: 2 additions & 2 deletions playground/rsc-parcel-framework/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
"@types/express": "^5.0.0",
"@types/node": "^22.13.1",
"@types/parcel-env": "0.0.8",
"@types/react-dom": "^19.0.3",
"@types/react": "^19.0.8",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"parcel": "2.15.0",
"parcel-config-react-router-experimental": "1.0.25"
},
Expand Down
4 changes: 2 additions & 2 deletions playground/rsc-parcel/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
"@types/express": "^5.0.0",
"@types/node": "^22.13.1",
"@types/parcel-env": "0.0.8",
"@types/react-dom": "^19.0.3",
"@types/react": "^19.0.8",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.8",
"browserify-zlib": "^0.2.0",
"buffer": "^5.5.0||^6.0.0",
"events": "^3.1.0",
Expand Down
Loading
Loading