Single fetch: loader type us unknown

[ziimakc]

Reproduction

https://github.com/ziimakc/types_error_remix

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i5-9300H CPU @ 2.40GHz
    Memory: 3.13 GB / 15.84 GB
  Binaries:
    Node: 18.16.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.14.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.0.6 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @remix-run/dev: 2.9.1 => 2.9.1
    @remix-run/node: 2.9.1 => 2.9.1
    @remix-run/react: 2.9.1 => 2.9.1
    @remix-run/serve: 2.9.1 => 2.9.1
    vite: 5.2.10 => 5.2.10

Used Package Manager

pnpm

Expected Behavior

For const xxx = useLoaderData<typeof loader>() xxx type should be { message: string }

Actual Behavior

For const xxx = useLoaderData<typeof loader>() xxx type is unknown

[rphlmr]

Try to add "node_modules/@remix-run/react/future/single-fetch.d.ts" in compilerOptions.types. It works for me.

[ziimakc]

@rphlmr thanks, it works using types with ./node_modules/@remix-run/react/future/single-fetch.d.ts.

Probably we should update docs: https://remix.run/docs/en/main/guides/single-fetch#type-inference

Not sure why includes doesn't work the same way.

[trevor-hackett]

From the docs:

Specifies a list of glob patterns that match files to be included in compilation

include isn't meant to add types to your app. It's meant to tell typescript about the files you want compiled/type checked.

compilerOptions.types is used to add global types to your app without needing to reference them in your code. Since ./node_modules/@remix-run/react/future/single-fetch.d.ts comes last, it'll override the previous types from @remix-run/node

[brophdawg11]

Looks like we chose includes just because it's a bit lighter weight in #9272 but if it's conflicting with @remix-run/node in types then we should probably change our recommendation to be to add it to types

[MarkoH17]

Looks like moving it from include to compilerOptions.types doesn't allow for the use of new _SingleFetch types, like UIMatch_SingleFetch

[brophdawg11]

Did a quick test of this with @pcattori and it seems the original issue was a combination of using include and pnpm. Because pnpm is stricter about deps and nested deps, when processing the single-fetch.d.ts as part of include, it wasn't able to find the internally referenced @remix-run/server-runtime dependencies unless you specifically installed that as a dependency in your app's package.json. This was not an issue in an npm app because of the looser node_modules organization.

Moving to use types does seem to be the proper approach and works for both npm and pnpm without adding any new deps. We've updated this as the recommendation in #9336

@MarkoH17 we did not have any issues using UIMatch_SingleFetch when using compilerOptions.types - would you be able to open a new issue with a reproduction if you're still having issues there?