Fix webpack/terser startTransition minification bug in production mode (

#10588)

.changeset/start-transition-minification.md

@@ -0,0 +1,6 @@
+---
+"react-router": patch
+"react-router-dom": patch
+---
+
+Work around webpack/terser `React.startTransition` minification bug in production mode

packages/react-router-dom/index.tsx

@@ -300,10 +300,24 @@ export interface BrowserRouterProps {
   window?: Window;
 }
 
-// Webpack + React 17 fails to compile on the usage of `React.startTransition` or
-// `React["startTransition"]` even if it's behind a feature detection of
-// `"startTransition" in React`. Moving this to a constant avoids the issue :/
+// Webpack + React 17 fails to compile on any of the following:
+// * 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 reference once up front resolves that issue.
 const START_TRANSITION = "startTransition";
+const startTransitionImpl = React[START_TRANSITION];
 
 /**
  * A `<Router>` for use in web browsers. Provides the cleanest URLs.
@@ -325,8 +339,8 @@ export function BrowserRouter({
   });
   let setState = React.useCallback(
     (newState: { action: NavigationType; location: Location }) => {
-      START_TRANSITION in React
-        ? React[START_TRANSITION](() => setStateImpl(newState))
+      startTransitionImpl
+        ? startTransitionImpl(() => setStateImpl(newState))
         : setStateImpl(newState);
     },
     [setStateImpl]
@@ -368,8 +382,8 @@ export function HashRouter({ basename, children, window }: HashRouterProps) {
   });
   let setState = React.useCallback(
     (newState: { action: NavigationType; location: Location }) => {
-      START_TRANSITION in React
-        ? React[START_TRANSITION](() => setStateImpl(newState))
+      startTransitionImpl
+        ? startTransitionImpl(() => setStateImpl(newState))
         : setStateImpl(newState);
     },
     [setStateImpl]
@@ -407,8 +421,8 @@ function HistoryRouter({ basename, children, history }: HistoryRouterProps) {
   });
   let setState = React.useCallback(
     (newState: { action: NavigationType; location: Location }) => {
-      START_TRANSITION in React
-        ? React[START_TRANSITION](() => setStateImpl(newState))
+      startTransitionImpl
+        ? startTransitionImpl(() => setStateImpl(newState))
         : setStateImpl(newState);
     },
     [setStateImpl]

packages/react-router/lib/components.tsx

@@ -54,10 +54,24 @@ export interface RouterProviderProps {
   router: RemixRouter;
 }
 
-// Webpack + React 17 fails to compile on the usage of `React.startTransition` or
-// `React["startTransition"]` even if it's behind a feature detection of
-// `"startTransition" in React`. Moving this to a constant avoids the issue :/
+// Webpack + React 17 fails to compile on any of the following:
+// * 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 reference once up front resolves that issue.
 const START_TRANSITION = "startTransition";
+const startTransitionImpl = React[START_TRANSITION];
 
 /**
  * Given a Remix Router instance, render the appropriate UI
@@ -71,8 +85,8 @@ export function RouterProvider({
   let [state, setStateImpl] = React.useState(router.state);
   let setState = React.useCallback(
     (newState: RouterState) => {
-      START_TRANSITION in React
-        ? React[START_TRANSITION](() => setStateImpl(newState))
+      startTransitionImpl
+        ? startTransitionImpl(() => setStateImpl(newState))
         : setStateImpl(newState);
     },
     [setStateImpl]
@@ -183,8 +197,8 @@ export function MemoryRouter({
   });
   let setState = React.useCallback(
     (newState: { action: NavigationType; location: Location }) => {
-      START_TRANSITION in React
-        ? React[START_TRANSITION](() => setStateImpl(newState))
+      startTransitionImpl
+        ? startTransitionImpl(() => setStateImpl(newState))
         : setStateImpl(newState);
     },
     [setStateImpl]