loaderremix.run

Remix.run useLoaderData returns type any


I was just trying this new thing remix.run and came across this. Everywhere in cos for this framework they are using const data = useLoaderData() to have type of data variable inferred. But for me this is not working:

import { json } from "@remix-run/node";
import type { LoaderFunction, LoaderArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { getUsers } from "~/models/users.server";

export const loader: LoaderFunction = async (args: LoaderArgs) => {
  const users = await getUsers();
  return json({ users: users });
};

export default function Users() {
  const { users } = useLoaderData<typeof loader>();
  return (
    <div>
      {users.map((u) => (
        <p key={u.id}>{u.username}</p>
      ))}
    </div>
  );
}

My VSCode says that variable users has any type and there is a squiggly line red line bellow u in map...what is wrong? package.json:

  "@remix-run/css-bundle": "^1.16.0",
    "@remix-run/node": "^1.16.0",
    "@remix-run/react": "^1.16.0",
    "@remix-run/serve": "^1.16.0",

Solution

  • export async function loader(args: LoaderArgs){
      const users = await getUsers();
      return json({ users: users });
    };
    

    Try this