Re-exported `default` from `route.ts` breaks `{ loaderData }` component prop passing

[nowells]

I'm using React Router as a...

framework

Reproduction

diff --git a/integration/fs-routes-test.ts b/integration/fs-routes-test.ts
index 1a5d6122a..bcea114d0 100644
--- a/integration/fs-routes-test.ts
+++ b/integration/fs-routes-test.ts
@@ -129,6 +129,22 @@ test.describe("fs-routes", () => {
           }
         `,
 
+        "app/routes/default-re-export/route.ts": js`
+          /*
+            // This works, but the below does not.
+            import Component from "./Component.tsx";
+            export default Component;
+          */
+          export { default } from "./Component.tsx";
+          export const loader = () => ({data: "data"});
+        `,
+
+        "app/routes/default-re-export/Component.tsx": js`
+          export default function ({loaderData}) {
+            return <h2>Default Re-export {loaderData.data}</h2>;
+          }
+        `,
+
         [`app/routes/ignored-route.jsx`]: js`
           export default function () {
             return <h2>i should 404</h2>;
@@ -218,6 +234,18 @@ test.describe("fs-routes", () => {
   <h1>Root</h1>
   <h2>Dashboard Layout</h2>
   <h3>Dashboard Index</h3>
+</div>`);
+    });
+
+    test("renders matching routes (with default re-exported)", async ({ page }) => {
+      let app = new PlaywrightFixture(appFixture, page);
+      await app.goto("/default-re-export");
+      expect(await app.getHtml("#content")).toBe(`<div id="content">
+  <h1>Root</h1>
+  <h2>
+    Default Re-export
+    <!-- -->data
+  </h2>
 </div>`);
     });
   }

System Info

System:
    OS: macOS 15.1.1
    CPU: (8) arm64 Apple M1
    Memory: 87.45 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.local/share/mise/installs/node/20/bin/node
    Yarn: 1.22.17 - ~/.local/share/mise/installs/yarn/1.22.17/bin/yarn
    npm: 10.8.1 - ~/.local/share/mise/installs/node/20/bin/npm
    pnpm: 9.11.0 - ~/.local/share/mise/installs/pnpm/9.11.0/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 18.1.1
  npmPackages:
    vite: ^5.1.0 => 5.1.3 

Used Package Manager

pnpm

Expected Behavior

When re-exporting component from a route, it should still allow {loaderData} props to work (and not required useLoaderData)

This currently works:

import Component from "./Component.tsx";
export default Component;
export const loader = () => ({data: "loader"});

This is currently broken:

export { default } from "./Component.tsx";
export const loader = () => ({data: "loader"});

Where ./Component.tsx is

export default function Component({loaderData}) {
  return <div>{loaderData.data}</div>
}

Actual Behavior

An error is thrown that loaderData.data fails due to loaderData being undefined.

[github-actions[bot]]

To align with our new Open Governance model, we are now requiring that all issues have a minimal and runnable reproduction. To that end, we're doing some housekeeping in the repo to clean up existing issues that do not have a valid reproduction. This should get us down to a more manageable number of issues and allow us to be more responsive to existing and newly filed issues.

We're using a Github actions script to identify issues without a reproduction by looking for a StackBlitz, CodeSandbox, or Github link in the issue body. This won't be perfect, so if this issue has a reproduction on another platform, please comment back on here and we can re-open the issue. Similarly, if there's a reproduction buried in a comment, please move the link into the description and comment back. Please tag @brophdawg11 or @brookslybrand in your comment so we get a notification as well 🙂.

If this issue did not have a reproduction but is still valid, or if you wish to start with a fresh issue, please create a new issue with a fresh reproduction against v7 and link to this issue in the new description.

If this a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support it can be considered for implementation.

If you have any questions you can always reach out on Discord. Thanks again for providing feedback and helping us make React Router even better!