From 96e1fc1dcdcfd89930df1af4cf190f43c2a0f461 Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Tue, 20 Jun 2023 16:25:33 -0400 Subject: [PATCH] Inline startTransitionImpl to avoid .d.ts issues with skipLibCheck:false (#10622) * Inline startTransitionImpl to avoid .d.ts causing issues with skipLibCheck:false * Add changeset --- .changeset/tsc-skiplibcheck-react17.md | 6 ++++ packages/react-router-dom/index.tsx | 25 ++++++++++++++++- packages/react-router/index.ts | 2 -- packages/react-router/lib/components.tsx | 25 ++++++++++++++++- .../lib/polyfills/start-transition.ts | 28 ------------------- 5 files changed, 54 insertions(+), 32 deletions(-) create mode 100644 .changeset/tsc-skiplibcheck-react17.md delete mode 100644 packages/react-router/lib/polyfills/start-transition.ts diff --git a/.changeset/tsc-skiplibcheck-react17.md b/.changeset/tsc-skiplibcheck-react17.md new file mode 100644 index 0000000000..22c75a0e66 --- /dev/null +++ b/.changeset/tsc-skiplibcheck-react17.md @@ -0,0 +1,6 @@ +--- +"react-router": patch +"react-router-dom": patch +--- + +Fix `tsc --skipLibCheck:false` issues on React 17 diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx index 73b797c01b..dc9edbeca8 100644 --- a/packages/react-router-dom/index.tsx +++ b/packages/react-router-dom/index.tsx @@ -27,7 +27,6 @@ import { UNSAFE_NavigationContext as NavigationContext, UNSAFE_RouteContext as RouteContext, UNSAFE_mapRouteProperties as mapRouteProperties, - UNSAFE_startTransitionImpl as startTransitionImpl, UNSAFE_useRouteId as useRouteId, } from "react-router"; import type { @@ -297,6 +296,30 @@ function deserializeErrors( //#region Components //////////////////////////////////////////////////////////////////////////////// +/** + Webpack + React 17 fails to compile on any of the following because webpack + complains that `startTransition` doesn't exist in `React`: + * import { startTransition } from "react" + * import * as React from from "react"; + "startTransition" in React ? React.startTransition(() => setState()) : setState() + * import * as React from from "react"; + "startTransition" in React ? React["startTransition"](() => setState()) : setState() + + Moving it to a constant such as the following solves the Webpack/React 17 issue: + * import * as React from from "react"; + const START_TRANSITION = "startTransition"; + START_TRANSITION in React ? React[START_TRANSITION](() => setState()) : setState() + + However, that introduces webpack/terser minification issues in production builds + in React 18 where minification/obfuscation ends up removing the call of + React.startTransition entirely from the first half of the ternary. Grabbing + this exported reference once up front resolves that issue. + + See https://github.com/remix-run/react-router/issues/10579 +*/ +const START_TRANSITION = "startTransition"; +const startTransitionImpl = React[START_TRANSITION]; + export interface BrowserRouterProps { basename?: string; children?: React.ReactNode; diff --git a/packages/react-router/index.ts b/packages/react-router/index.ts index ad1e1fd56e..08979c483d 100644 --- a/packages/react-router/index.ts +++ b/packages/react-router/index.ts @@ -43,7 +43,6 @@ import { UNSAFE_warning as warning, } from "@remix-run/router"; -import startTransitionImpl from "./lib/polyfills/start-transition"; import type { AwaitProps, MemoryRouterProps, @@ -304,5 +303,4 @@ export { mapRouteProperties as UNSAFE_mapRouteProperties, useRouteId as UNSAFE_useRouteId, useRoutesImpl as UNSAFE_useRoutesImpl, - startTransitionImpl as UNSAFE_startTransitionImpl, }; diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx index 444b496bf3..e46bfc78ac 100644 --- a/packages/react-router/lib/components.tsx +++ b/packages/react-router/lib/components.tsx @@ -22,7 +22,6 @@ import { UNSAFE_getPathContributingMatches as getPathContributingMatches, } from "@remix-run/router"; -import startTransitionImpl from "./polyfills/start-transition"; import type { DataRouteObject, IndexRouteObject, @@ -60,6 +59,30 @@ export interface RouterProviderProps { future?: FutureConfig; } +/** + Webpack + React 17 fails to compile on any of the following because webpack + complains that `startTransition` doesn't exist in `React`: + * import { startTransition } from "react" + * import * as React from from "react"; + "startTransition" in React ? React.startTransition(() => setState()) : setState() + * import * as React from from "react"; + "startTransition" in React ? React["startTransition"](() => setState()) : setState() + + Moving it to a constant such as the following solves the Webpack/React 17 issue: + * import * as React from from "react"; + const START_TRANSITION = "startTransition"; + START_TRANSITION in React ? React[START_TRANSITION](() => setState()) : setState() + + However, that introduces webpack/terser minification issues in production builds + in React 18 where minification/obfuscation ends up removing the call of + React.startTransition entirely from the first half of the ternary. Grabbing + this exported reference once up front resolves that issue. + + See https://github.com/remix-run/react-router/issues/10579 +*/ +const START_TRANSITION = "startTransition"; +const startTransitionImpl = React[START_TRANSITION]; + /** * Given a Remix Router instance, render the appropriate UI */ diff --git a/packages/react-router/lib/polyfills/start-transition.ts b/packages/react-router/lib/polyfills/start-transition.ts deleted file mode 100644 index 72c6b8bba3..0000000000 --- a/packages/react-router/lib/polyfills/start-transition.ts +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from "react"; - -/** - Not a true "polyfill" since we guard via the feature flag at runtime, - but close enough :) - - Webpack + React 17 fails to compile on any of the following because webpack - complains that `startTransition` doesn't exist in `React`: - * import { startTransition } from "react" - * import * as React from from "react"; - "startTransition" in React ? React.startTransition(() => setState()) : setState() - * import * as React from from "react"; - "startTransition" in React ? React["startTransition"](() => setState()) : setState() - - Moving it to a constant such as the following solves the Webpack/React 17 issue: - * import * as React from from "react"; - const START_TRANSITION = "startTransition"; - START_TRANSITION in React ? React[START_TRANSITION](() => setState()) : setState() - - However, that introduces webpack/terser minification issues in production builds - in React 18 where minification/obfuscation ends up removing the call of - React.startTransition entirely from the first half of the ternary. Grabbing - this exported reference once up front resolves that issue. - - See https://github.com/remix-run/react-router/issues/10579 -*/ -const START_TRANSITION = "startTransition"; -export default React[START_TRANSITION];