T
TanStack•8mo ago
rare-sapphire

Route.useLoaderData() always resolves to ReadableStream<any>

v1.97.15 
// app/routes/index.tsx
import * as fs from "node:fs";
import { createFileRoute, useRouter } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/start";

const filePath = "count.txt";

async function readCount() {
  return Number.parseInt(
    await fs.promises.readFile(filePath, "utf-8").catch(() => "0"),
  );
}

const getCount = createServerFn({
  method: "GET",
}).handler(() => {
  return readCount();
});

const updateCount = createServerFn({ method: "POST" })
  .validator((d: number) => d)
  .handler(async ({ data }) => {
    const count = await readCount();
    await fs.promises.writeFile(filePath, `${count + data}`);
  });

export const Route = createFileRoute("/test")({
  component: Home,
  loader: async () => await getCount(),
});

function Home() {
  const router = useRouter();
  const state = Route.useLoaderData();

  return (
    <button
      type="button"
      onClick={() => {
        updateCount({ data: 1 }).then(() => {
          router.invalidate();
        });
      }}
    >
      Add 1 to {state}?
    </button>
  );
}
// app/routes/index.tsx
import * as fs from "node:fs";
import { createFileRoute, useRouter } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/start";

const filePath = "count.txt";

async function readCount() {
  return Number.parseInt(
    await fs.promises.readFile(filePath, "utf-8").catch(() => "0"),
  );
}

const getCount = createServerFn({
  method: "GET",
}).handler(() => {
  return readCount();
});

const updateCount = createServerFn({ method: "POST" })
  .validator((d: number) => d)
  .handler(async ({ data }) => {
    const count = await readCount();
    await fs.promises.writeFile(filePath, `${count + data}`);
  });

export const Route = createFileRoute("/test")({
  component: Home,
  loader: async () => await getCount(),
});

function Home() {
  const router = useRouter();
  const state = Route.useLoaderData();

  return (
    <button
      type="button"
      onClick={() => {
        updateCount({ data: 1 }).then(() => {
          router.invalidate();
        });
      }}
    >
      Add 1 to {state}?
    </button>
  );
}
Getting type error: Type 'ReadableStream<any>' is not assignable to type 'ReactNode'
4 Replies
ambitious-aqua
ambitious-aqua•8mo ago
can you please provide a complete minimal example? there must be something wrong with typescript setup do you have strict: true in tsconfig?
rare-sapphire
rare-sapphireOP•8mo ago
Here: https://stackblitz.com/edit/tanstack-router-788sabp4?file=app%2Froutes%2Findex.tsx So it resolves to any in Stackblitz so not exactly ReadableStream<any> but still not type-safe @Manuel Schiller Fixed when upgraded to 1.97.23
xenial-black
xenial-black•8mo ago
I still have this issue with the latest version 1.102.1 with the tsconfig.json from the docs: TS version 5.7.3 
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "skipLibCheck": true,
    "strictNullChecks": true,
    "strict": true,
    "types": ["@emotion/react/types/css-prop"]
  }
}
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "skipLibCheck": true,
    "strictNullChecks": true,
    "strict": true,
    "types": ["@emotion/react/types/css-prop"]
  }
}
I tested with and without the @emotion types. In the Start Basic Stack Blitz it resolves to any in my code it resolves ReadableStream
ambitious-aqua
ambitious-aqua•7mo ago
most likey some types are missing do you have the react types installed?

Did you find this page helpful?