'Possibly Infinite' type when attempting to use new Single Fetch types

[lsthornt]

Reproduction

I have been running across various flavors of this issue, but I think I've distilled it to the simplest reproduction here: Typescript Playground reproduction

Essentially, when attempting to use the new single fetch DataFunction types, you can trigger Type instantiation is excessively deep and possibly infinite. ts(2589). I've found it helpful/necessary to use these types to develop boilerplate-reducing wrappers around unstable_defineAction/unstable_defineLoader.

Falling back to the currently-exposed ActionFunction type resolves the issue, but risks developing against the incorrect types.

I recognize that this is a issue on functions explicitly labeled as unstable, but I figured it may be helpful to expose as these future APIs get hardened.

System Info

Typescript Playground

Used Package Manager

npm

Expected Behavior

One can develop against the new ActionFunction types added in 2.9.2 without typescript errors

Actual Behavior

Attempting to use the internal DataFunctionReturnValue triggers a Typescript error.

[lsthornt]

Related, if useful: I've found that trying to create generic functions at all utilizing the unsafe_define... types will often crush the Typescript server.

A common case for me is wanting to use the new equivalent of ActionFunction, which is only accessible as ReturnType<typeof unsafe_defineAction>. Using that type in conjunction with something like useFetcher<T> will generally freeze the TS server.

[ksmithut]

I'll add my own example to this. Slight variation because I'm using the jsdoc flavor of TypeScript, but the error is the same.

vite.config.js

import { vitePlugin as remix } from '@remix-run/dev'
import { defineConfig } from 'vite'
import { installGlobals } from '@remix-run/node'

installGlobals({ nativeFetch: true })

export default defineConfig({
  plugins: [remix({ future: { unstable_singleFetch: true } })]
})

app/routes/_index.jsx

import { unstable_defineLoader as defineLoader } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'

export const loader = defineLoader(async ({ request, response }) => {
  return { test: true }
})

export default function Home() {
  const data = useLoaderData()
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "Node",
    "module": "ESNext",
    "esModuleInterop": true,
    "target": "ESNext",
    "alwaysStrict": true,
    "strict": true,
    "sourceMap": true,
    "outDir": "dist",
    "allowJs": true,
    "checkJs": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "resolveJsonModule": true,
    "types": ["vite/client"]
  },
  "include": [
    "app/**/*",
    "*.js",
    "*.cjs",
    "*.json",
    "node_modules/@remix-run/react/future/single-fetch.d.ts"
  ],
  "exclude": []
}

[pcattori]

Single-fetch typesafety fixes were released in v2.12 . Note that the setup for the types has changed too (https://github.com/remix-run/remix/blob/main/CHANGELOG.md#improved-single-fetch-type-safety-unstable).

If the issue persists after upgrading and changing your types setup, let me know and we can reopen this.