Loader data passed to component gets undefined error

[dizzyjaguar]

Reproduction

Link to a minimal reproduction
https://github.com/dizzyjaguar/rr7-bug

• this bug wouldn't happen in Remix v2. Only after I migrated my Remix v2 app to React Router, did this happen.

System Info

System:
    OS: macOS 15.6
    CPU: (8) arm64 Apple M3
    Memory: 106.86 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    bun: 1.1.8 - ~/.bun/bin/bun
  Browsers:
    Chrome: 139.0.7258.128
    Safari: 18.6
  npmPackages:
    @react-router/dev: ^7.7.1 => 7.8.2 
    @react-router/node: ^7.7.1 => 7.8.2 
    @react-router/remix-routes-option-adapter: ^7.8.2 => 7.8.2 
    @react-router/serve: ^7.7.1 => 7.8.2 
    react-router: ^7.7.1 => 7.8.2 
    vite: ^6.3.3 => 6.3.5

Used Package Manager

npm

Expected Behavior

Loader data, that shouldn't/isn't undefined, coming up undefined when passed to a component from the route page.

Actual Behavior

Getting a cannot map of undefined error in the component receiving the loader data as props. But the data is mappable in the route component itself .

[rururux]

Hello.
I tried the reproduction repository, and it appears that the issue is that my-modal.tsx is recognized as the route rather than a component.
In fact, when I access http://localhost:5173/home/my-modal, I don't receive a 404 error, and the page displays normally.
I confirmed that moving my-modal.tsx to a different folder, such as the components folder, resolves the issue.

By the way, was the configuration in the routes.ts file set up by you or generated automatically by a tool?

[brophdawg11]

As noted above, your route setup is causing the file to be treated as as a route - which seems correct per the documentation: https://github.com/kiliman/remix-flat-routes?tab=readme-ov-file#nested-folders-with-flat-files-convention--new-in-v051.

You can see your computed route tree via:

> npx react-router routes
<Routes>
  <Route file="root.tsx">
    <Route path="home" index file="routes/home+/_index.tsx" />
    <Route path="home/my-modal" file="routes/home+/my-modal.tsx" />
  </Route>
</Routes>

[dizzyjaguar]

@rururux @brophdawg11 Ahh okay this makes sense, thanks for getting this figured out for me!

I was able to co-locate my components inside of the route directories with remix v2, so I must just need to update the config to only treat files with _ as a route