React 18 "React.use" webpack fix (#14113)

Author: GeoffKarnov

.changeset/rotten-foxes-deliver.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Adjust internal RSC usage of `React.use` to avoid Webpack compilation errors when using React 18

contributors.yml

@@ -125,6 +125,7 @@
 - gatzjames
 - gavriguy
 - Geist5000
+- GeoffKarnov
 - gesposito
 - gianlucca
 - gijo-varghese

packages/react-router/lib/rsc/server.ssr.tsx

@@ -8,6 +8,19 @@ import { RSCRouterGlobalErrorBoundary } from "./errorBoundaries";
 import { shouldHydrateRouteLoader } from "../dom/ssr/routes";
 import type { RSCPayload } from "./server.rsc";
 
+// Safe version of React.use() that will not cause compilation errors against
+// React 18 and will result in a runtime error if used (you can't use RSC against
+// React 18).
+const REACT_USE = "use";
+const useImpl = (React as any)[REACT_USE];
+
+function useSafe<T>(promise: Promise<T> | React.Context<T>): T {
+  if (useImpl) {
+    return useImpl(promise);
+  }
+  throw new Error("React Router v7 requires React 19+ for RSC features.");
+}
+
 export type SSRCreateFromReadableStreamFunction = (
   body: ReadableStream<Uint8Array>,
 ) => Promise<unknown>;
@@ -196,8 +209,8 @@ export interface RSCStaticRouterProps {
  * @returns A React component that renders the {@link unstable_RSCPayload} as HTML.
  */
 export function RSCStaticRouter({ getPayload }: RSCStaticRouterProps) {
-  // @ts-expect-error - need to update the React types
-  const payload = React.use(getPayload()) as RSCPayload;
+  // Can be replaced with React.use when v18 compatibility is no longer required.
+  const payload = useSafe(getPayload());
 
   if (payload.type === "redirect") {
     throw new Response(null, {