Fix feature detection of React.startTransition

remix-run · Jun 7, 2023 · 6069e2a · 6069e2a
1 parent 610ce6e
commit 6069e2a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 10 deletions.
diff --git a/.changeset/silly-eagles-divide.md b/.changeset/silly-eagles-divide.md
@@ -0,0 +1,6 @@
+---
+"react-router": patch
+"react-router-dom": patch
+---
+
+Adjust feature detection of `React.startTransition` to fix webpack + react 17 compilation error
diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
@@ -300,6 +300,11 @@ 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 :/
+const START_TRANSITION = "startTransition";
+
 /**
  * A `<Router>` for use in web browsers. Provides the cleanest URLs.
  */
@@ -320,8 +325,8 @@ export function BrowserRouter({
   });
   let setState = React.useCallback(
     (newState: { action: NavigationType; location: Location }) => {
-      "startTransition" in React
-        ? React.startTransition(() => setStateImpl(newState))
+      START_TRANSITION in React
+        ? React[START_TRANSITION](() => setStateImpl(newState))
         : setStateImpl(newState);
     },
     [setStateImpl]
@@ -363,8 +368,8 @@ export function HashRouter({ basename, children, window }: HashRouterProps) {
   });
   let setState = React.useCallback(
     (newState: { action: NavigationType; location: Location }) => {
-      "startTransition" in React
-        ? React.startTransition(() => setStateImpl(newState))
+      START_TRANSITION in React
+        ? React[START_TRANSITION](() => setStateImpl(newState))
         : setStateImpl(newState);
     },
     [setStateImpl]
@@ -402,8 +407,8 @@ function HistoryRouter({ basename, children, history }: HistoryRouterProps) {
   });
   let setState = React.useCallback(
     (newState: { action: NavigationType; location: Location }) => {
-      "startTransition" in React
-        ? React.startTransition(() => setStateImpl(newState))
+      START_TRANSITION in React
+        ? React[START_TRANSITION](() => setStateImpl(newState))
         : setStateImpl(newState);
     },
     [setStateImpl]

diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx
@@ -54,6 +54,11 @@ 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 :/
+const START_TRANSITION = "startTransition";
+
 /**
  * Given a Remix Router instance, render the appropriate UI
  */
@@ -66,8 +71,8 @@ export function RouterProvider({
   let [state, setStateImpl] = React.useState(router.state);
   let setState = React.useCallback(
     (newState: RouterState) => {
-      "startTransition" in React
-        ? React.startTransition(() => setStateImpl(newState))
+      START_TRANSITION in React
+        ? React[START_TRANSITION](() => setStateImpl(newState))
         : setStateImpl(newState);
     },
     [setStateImpl]
@@ -178,8 +183,8 @@ export function MemoryRouter({
   });
   let setState = React.useCallback(
     (newState: { action: NavigationType; location: Location }) => {
-      "startTransition" in React
-        ? React.startTransition(() => setStateImpl(newState))
+      START_TRANSITION in React
+        ? React[START_TRANSITION](() => setStateImpl(newState))
         : setStateImpl(newState);
     },
     [setStateImpl]