Support RSC lazy default export as Component fallback (#13763)

Author: markdalgleish

integration/helpers/rsc-parcel/src/routes/home.tsx

@@ -1,3 +1,3 @@
-export function Component() {
+export default function HomeRoute() {
   return <h2>Home</h2>;
 }

integration/rsc/rsc-test.ts

@@ -109,7 +109,7 @@ implementations.forEach((implementation) => {
               export function loader() {
                 return { message: "Loader Data" };
               }
-              export function Component({ loaderData }) {
+              export default function HomeRoute({ loaderData }) {
                 return <h2 data-home>Home: {loaderData.message}</h2>;
               }
             `,
@@ -141,7 +141,7 @@ implementations.forEach((implementation) => {
                 return { message: "Loader Data" };
               }
 
-              export function Component({ loaderData }) {
+              export default function HomeRoute({ loaderData }) {
                 return (
                   <div>
                     <h2 data-home>Home: {loaderData.message}</h2>
@@ -236,7 +236,7 @@ implementations.forEach((implementation) => {
                 return { message: "Home Page Data" };
               }
 
-              export function Component({ loaderData }) {
+              export default function HomeRoute({ loaderData }) {
                 return (
                   <div>
                     <h1 data-page="home">Home Page</h1>
@@ -251,7 +251,7 @@ implementations.forEach((implementation) => {
                 return { count: 1 };
               }
 
-              export { Component } from "./dashboard.client";
+              export { default } from "./dashboard.client";
             `,
             "src/routes/dashboard.client.tsx": js`
               "use client";
@@ -260,7 +260,7 @@ implementations.forEach((implementation) => {
               import { Link } from "react-router";
 
               // Export the entire route as a client component
-              export function Component({ loaderData }) {
+              export default function DashboardRoute({ loaderData }) {
                 const [count, setCount] = useState(loaderData.count);
 
                 return (
@@ -367,7 +367,7 @@ implementations.forEach((implementation) => {
                 return { message: "Home Page Data" };
               }
 
-              export function Component({ loaderData }) {
+              export default function HomeRoute({ loaderData }) {
                 return (
                   <div>
                     <h1 data-page="home">Home Page</h1>
@@ -477,7 +477,7 @@ implementations.forEach((implementation) => {
               }
             `,
             "src/routes/home.tsx": js`
-              export { Component } from "./home.client";
+              export { default } from "./home.client";
             `,
             "src/routes/home.client.tsx": js`
               "use client";
@@ -486,7 +486,7 @@ implementations.forEach((implementation) => {
 
               import { incrementCounter } from "./home.actions";
 
-              export function Component() {
+              export default function HomeRoute() {
                 const [count, incrementCounterAction, incrementing] = useActionState(incrementCounter, 0);
 
                 return (
@@ -547,7 +547,7 @@ implementations.forEach((implementation) => {
                 return { name, count };
               }
 
-              export function Component({ loaderData }) {
+              export default function HomeRoute({ loaderData }) {
                 const updateCounter = async (formData: FormData) => {
                   "use server";
                   name = formData.get("name");
@@ -624,7 +624,7 @@ implementations.forEach((implementation) => {
               import { redirectAction } from "./home.actions";
               import { Counter } from "./home.client";
 
-              export function Component(props) {
+              export default function HomeRoute(props) {
                 console.log({props});
                 return (
                   <div>
@@ -697,7 +697,7 @@ implementations.forEach((implementation) => {
                 throw new Error("Intentional error from loader");
               }
 
-              export function Component() {
+              export default function HomeRoute() {
                 return <h2>This shouldn't render</h2>;
               }
 

packages/react-router/lib/rsc/server.rsc.ts

@@ -33,7 +33,6 @@ type ServerRouteObjectBase = {
   action?: ActionFunction;
   clientAction?: ClientActionFunction;
   clientLoader?: ClientLoaderFunction;
-  Component?: React.ComponentType<any>;
   ErrorBoundary?: React.ComponentType<any>;
   handle?: any;
   headers?: HeadersFunction;
@@ -48,7 +47,20 @@ type ServerRouteObjectBase = {
 export type ServerRouteObject = ServerRouteObjectBase & {
   id: string;
   path?: string;
-  lazy?: () => Promise<ServerRouteObjectBase>;
+  Component?: React.ComponentType<any>;
+  lazy?: () => Promise<
+    ServerRouteObjectBase &
+      (
+        | {
+            default?: React.ComponentType<any>;
+            Component?: never;
+          }
+        | {
+            default?: never;
+            Component?: React.ComponentType<any>;
+          }
+      )
+  >;
 } & (
     | {
         index: true;
@@ -578,17 +590,8 @@ async function getServerRouteMatch(
   shouldRenderComponent: boolean,
   parentId: string | undefined
 ) {
-  if ("lazy" in match.route && match.route.lazy) {
-    Object.assign(match.route, {
-      // @ts-expect-error - FIXME: Fix the types here
-      ...((await match.route.lazy()) as any),
-      path: match.route.path,
-      index: (match.route as any).index,
-      id: match.route.id,
-    });
-    match.route.lazy = undefined;
-  }
-
+  // @ts-expect-error - FIXME: Fix the types here
+  await explodeLazyRoute(match.route);
   const Layout = (match.route as any).Layout || React.Fragment;
   const Component = (match.route as any).Component;
   const ErrorBoundary = (match.route as any).ErrorBoundary;
@@ -712,9 +715,25 @@ async function getManifestRoute(
 
 async function explodeLazyRoute(route: ServerRouteObject) {
   if ("lazy" in route && route.lazy) {
-    let impl = (await route.lazy()) as any;
-    for (let [k, v] of Object.entries(impl)) {
-      route[k as keyof ServerRouteObject] = v;
+    let {
+      default: lazyDefaultExport,
+      Component: lazyComponentExport,
+      ...lazyProperties
+    } = (await route.lazy()) as any;
+    let Component = lazyComponentExport || lazyDefaultExport;
+    if (Component && !route.Component) {
+      route.Component = Component;
+    }
+    for (let [k, v] of Object.entries(lazyProperties)) {
+      if (
+        k !== "id" &&
+        k !== "path" &&
+        k !== "index" &&
+        k !== "children" &&
+        route[k as keyof ServerRouteObject] == null
+      ) {
+        route[k as keyof ServerRouteObject] = v;
+      }
     }
     route.lazy = undefined;
   }

playground/rsc-parcel/src/routes/about/about.client.tsx

@@ -15,7 +15,7 @@ export async function clientLoader({ serverLoader }: ClientLoaderFunctionArgs) {
   };
 }
 
-export function Component() {
+export default function AboutRoute() {
   const { client, message } = useLoaderData<typeof clientLoader>();
 
   return (

playground/rsc-parcel/src/routes/about/about.tsx

@@ -1,4 +1,4 @@
-export { clientLoader, Component } from "./about.client";
+export { clientLoader, default } from "./about.client";
 
 export function loader() {
   return {

playground/rsc-parcel/src/routes/fetcher/fetcher.client.tsx

@@ -3,7 +3,7 @@
 import { useFetcher } from "react-router";
 import type { loader } from "../resource/resource";
 
-export function Component() {
+export default function FetcherRoute() {
   const fetcher = useFetcher<typeof loader>();
 
   return (

playground/rsc-parcel/src/routes/fetcher/fetcher.ts

@@ -1 +1 @@
-export { Component } from "./fetcher.client";
+export { default } from "./fetcher.client";

playground/rsc-parcel/src/routes/home/home.client.tsx

@@ -15,7 +15,7 @@ export async function clientLoader({ serverLoader }: ClientLoaderFunctionArgs) {
   };
 }
 
-export function Component() {
+export default function HomeRoute() {
   const { client, message } = useLoaderData<typeof clientLoader>();
 
   return (

playground/rsc-parcel/src/routes/home/home.tsx

@@ -1,4 +1,4 @@
-export { clientLoader, Component } from "./home.client";
+export { clientLoader, default } from "./home.client";
 
 export function loader() {
   return {

playground/rsc-parcel/src/routes/root/root.client.tsx

@@ -27,7 +27,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
   );
 }
 
-export function Component() {
+export default function RootRoute() {
   const { counter, message } = useLoaderData<typeof loader>();
   return (
     <>