@@ -300,10 +300,24 @@ export interface BrowserRouterProps {
300
300
window ?: Window ;
301
301
}
302
302
303
- // Webpack + React 17 fails to compile on the usage of `React.startTransition` or
304
- // `React["startTransition"]` even if it's behind a feature detection of
305
- // `"startTransition" in React`. Moving this to a constant avoids the issue :/
303
+ // Webpack + React 17 fails to compile on any of the following:
304
+ // * import { startTransition } from "react"
305
+ // * import * as React from from "react";
306
+ // "startTransition" in React ? React.startTransition(() => setState()) : setState()
307
+ // * import * as React from from "react";
308
+ // "startTransition" in React ? React["startTransition"](() => setState()) : setState()
309
+ //
310
+ // Moving it to a constant such as the following solves the Webpack/React 17 issue:
311
+ // * import * as React from from "react";
312
+ // const START_TRANSITION = "startTransition";
313
+ // START_TRANSITION in React ? React[START_TRANSITION](() => setState()) : setState()
314
+ //
315
+ // However, that introduces webpack/terser minification issues in production builds
316
+ // in React 18 where minification/obfuscation ends up removing the call of
317
+ // React.startTransition entirely from the first half of the ternary. Grabbing
318
+ // this reference once up front resolves that issue.
306
319
const START_TRANSITION = "startTransition" ;
320
+ const startTransitionImpl = React [ START_TRANSITION ] ;
307
321
308
322
/**
309
323
* A `<Router>` for use in web browsers. Provides the cleanest URLs.
@@ -325,8 +339,8 @@ export function BrowserRouter({
325
339
} ) ;
326
340
let setState = React . useCallback (
327
341
( newState : { action : NavigationType ; location : Location } ) => {
328
- START_TRANSITION in React
329
- ? React [ START_TRANSITION ] ( ( ) => setStateImpl ( newState ) )
342
+ startTransitionImpl
343
+ ? startTransitionImpl ( ( ) => setStateImpl ( newState ) )
330
344
: setStateImpl ( newState ) ;
331
345
} ,
332
346
[ setStateImpl ]
@@ -368,8 +382,8 @@ export function HashRouter({ basename, children, window }: HashRouterProps) {
368
382
} ) ;
369
383
let setState = React . useCallback (
370
384
( newState : { action : NavigationType ; location : Location } ) => {
371
- START_TRANSITION in React
372
- ? React [ START_TRANSITION ] ( ( ) => setStateImpl ( newState ) )
385
+ startTransitionImpl
386
+ ? startTransitionImpl ( ( ) => setStateImpl ( newState ) )
373
387
: setStateImpl ( newState ) ;
374
388
} ,
375
389
[ setStateImpl ]
@@ -407,8 +421,8 @@ function HistoryRouter({ basename, children, history }: HistoryRouterProps) {
407
421
} ) ;
408
422
let setState = React . useCallback (
409
423
( newState : { action : NavigationType ; location : Location } ) => {
410
- START_TRANSITION in React
411
- ? React [ START_TRANSITION ] ( ( ) => setStateImpl ( newState ) )
424
+ startTransitionImpl
425
+ ? startTransitionImpl ( ( ) => setStateImpl ( newState ) )
412
426
: setStateImpl ( newState ) ;
413
427
} ,
414
428
[ setStateImpl ]
0 commit comments