Re-exported default from route.ts breaks { loaderData } component prop passing #12455
Description
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.