remix: Type of `useLoaderData()` doesn’t get inferred when using Yarn PnP

What version of Remix are you using?

1.19.1

Are all your remix dependencies & dev-dependencies using the same version?

Steps to Reproduce

yarn create remix with default settings (my-remix-app, Just the basics, Remix App Server, TypeScript, run yarn install)
cd my-remix-app

Make the following changes:

diff --git a/app/root.tsx b/app/root.tsx
index 8cb74a167..ad3a65b41 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -7,13 +7,17 @@
import {
   Outlet,
   Scripts,
   ScrollRestoration,
+  useLoaderData,
 } from "@remix-run/react";
 
 export const links: LinksFunction = () => [
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 ];
 
+export const loader = () => ({ some: "data" });
+
 export default function App() {
+  const data = useLoaderData<typeof loader>();
   return (
     <html lang="en">
       <head>

yarn set version berry
yarn (you should see the message “automatically enabling the compatibility node-modules linker 👍”, a line nodeLinker: node-modules will be added to .yarnrc.yml)
When using VSCode: open command panel (⇧ ⌘ P on macOS) → TypeScript: Select TypeScript Version… → Use Workspace Version
Observe that the inferred type of data is still (correctly) SerializeObject<UndefinedToOptional<{ some: string; }>>
Remove nodeLinker: node-modules from .yarnrc.yml (or change it to nodeLinker: pnp) and run yarn again. This will remove your node_modules folder and enable the Plug‘n’Play module resolution mechanism
Run yarn dlx @yarnpkg/sdks vscode
You’ll have to set the VSCode TypeScript version again like in step 6

Observe that the inferred type of data is now SerializeFrom<T>. Cmd+clicking on useLoaderData will go to line 114 in components.d.ts:

/**
 * Returns the JSON parsed data from the current route's `loader`.
 *
 * @see https://remix.run/hooks/use-loader-data
 */
export declare function useLoaderData<T = AppData>(): SerializeFrom<T>;

but it’s not possible to Cmd+click further on SerializeFrom.

Expected Behavior

The inferred type of useLoaderData<typeof loader>() remains SerializeObject<UndefinedToOptional<{ some: string; }>> as in step 7

Actual Behavior

The inferred type of useLoaderData<typeof loader>() is SerializeFrom<T> as described in step 11

About this issue

Original URL
State: closed
Created a year ago
Comments: 16 (16 by maintainers)

Commits related to this issue

followed steps outlined in https://github.com/remix-run/remix/issues/6994#issue-1828010686 — committed to nextbook/serialize-from by lensbart 10 months ago

Most upvoted comments

@lensbart Thanks for the tip about the underlying SerializeFrom type. Looks like this is due to the fact that @remix-run/server-runtime is a dev dependency. I’ve just opened a PR fixing this: https://github.com/remix-run/remix/pull/7137

markdalgleish on Aug 11, 2023

@markdalgleish Maybe I was confused and did something wrong when posting this message. Using the nightly seems to resolve my initial issue now. Apologies for any time lost.

I don’t have the issue with Record<string, number> in my main repository, but not sure if that’s relevant since we have a reproduction already.

lensbart on Aug 21, 2023