Using `data` utility function breaks `useLoaderData` types

[asgeo1]

Reproduction

Type safety seems messed up when returning data utility function from action/loader.

export const loader = async ({ request }: LoaderFunctionArgs) => {
  ...
  return data(mapped, {
    headers: {
      'Cache-Control': 'max-age=900, s-maxage=900, stale-while-revalidate=31536000'
    }
  })
}

export const VideosListPage = () => {
  const data = useLoaderData<typeof loader>()
  console.log(data[0]?.title)
  ...
}

Basically if you return data() from loader/action, the type of const data = useLoaderData<typeof loader>() will incorrectly be of DataWithResponseInit.

The typescript LSP will suggest properties like .data etc are available, but they don't work as that's not actually what is returned.

Searching this repo, there are other similar issues, but they are marked as closed/fixed. Which doesn't make sense, as the issue is definitely not fixed.

• useLoaderData types broken if unstable_data is conditionally used #9826
• Single fetch typesafety when using unstable_data conditionally #9998

System Info

System:
    OS: macOS 15.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.76 GB / 64.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 22.11.0 - ~/.nodenv/versions/22.11.0/bin/node
    npm: 10.9.0 - ~/.nodenv/versions/22.11.0/bin/npm
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 130.1.71.121
    Chrome: 131.0.6778.140
    Edge: 131.0.2903.99
    Safari: 18.2
  npmPackages:
    @remix-run/dev: ^2.15.1 => 2.15.1
    @remix-run/eslint-config: ^2.15.1 => 2.15.1
    @remix-run/node: ^2.15.1 => 2.15.1
    @remix-run/react: ^2.15.1 => 2.15.1
    @remix-run/route-config: ^2.15.1 => 2.15.1
    @remix-run/serve: ^2.15.1 => 2.15.1
    vite: ^5.1.0 => 5.4.8

Used Package Manager

npm

Expected Behavior

Types should be returned correctly

Actual Behavior

Types returned incorrectly

[bravo-kernel]

Confirmed as not fixed when using remix 2.15.0 and v3 future flag for single fetch.

Solution is provided here #9826 (comment)

[fiws]

I also ran into this, but it seems like this is just a "you gotta read the docs" issue. Adding the declare module stuff as described here fixed it.

I think the docs could be improved here, by moving this step into the "setup" part here as it is a crucial part. This is where i would expect it.

[bravo-kernel]

Fixed in #9999

[simply-arjen]

We also ran into this issue. The problem is that there is complete and incomplete documentation on different pages:

• 🔴 Incomplete: single-fetch, no mention of the "declare module" part.
• 🟢 Complete: future-flags v3_single_fetch.

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

// This part is missing on the single fetch page
declare module "@remix-run/node" {
  // or cloudflare, deno, etc.
  interface Future {
    v3_singleFetch: true;
  }
}

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_singleFetch: true,
      },
    }),
    tsconfigPaths(),
  ],
});

[github-actions]

Thank you for opening this issue, and our apologies we haven't gotten around to it yet!

With the release of React Router v7 we are sun-setting continued development/maintenance on Remix v2. If you have not already upgraded to React Router v7, we recommend you do so. We've tried to make the upgrade process as smooth as possible with our Future Flags. We are now in the process of cleaning up outdated issues and pull requests to improve the overall hygiene of our repositories.

We plan to continue to address 2 types of issues in Remix v2:

• Bugs that pose security concerns
• Bugs that prevent upgrading to React Router v7

If you believe this issue meets one of those criteria, please respond or create a new issue.

For all other issues, ongoing maintenance will be happening in React Router v7, so:

• If this is a bug, please reopen this issue in that repo with a new minimal reproduction against v7
• If this is 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 our framework even better!