T
TanStack•9mo ago
firm-tan

Unexpected Behavior with Unused Server Function in TanStack Start

Hi everyone! I’m facing an issue where an unused function is causing my application to misbehave. Specifically, when I include the following authenticateUserWithoutAPI function in my code, even if I don’t call it in any beforeLoad or other route handlers, it causes problems like: 1. The Clerk sign-in component not rendering. 2. The TanStack Router dev tools disappearing. I have in one file functions/users.ts this: 
export const authenticateUser = createServerFn({ method: "GET" }).handler(async () => {
  try {
    return { success: true };
  } catch (error) {
    console.log(error);
    return { status: 500 };
  }
});

export const authenticateUserWithoutAPI = async () => {
  await db.select().from(usersTable);

  throw redirect({ to: "/" });
};
export const authenticateUser = createServerFn({ method: "GET" }).handler(async () => {
  try {
    return { success: true };
  } catch (error) {
    console.log(error);
    return { status: 500 };
  }
});

export const authenticateUserWithoutAPI = async () => {
  await db.select().from(usersTable);

  throw redirect({ to: "/" });
};
If I comment out function authenticateUserWithoutAPI entirely, everything works as expected. I’m not using it anywhere directly, so I’m confused why its presence alone is affecting the behavior of my app. I only use authenticateUser in beforeLoad. I suppose the problem is using database in function directly. If I use it in "createServerFn" it's okay. Has anyone experienced this, or is there something in TanStack Start that might be causing this issue? What Am I missing? Important to mention the problem is in development environment. Thank you, in advance.
1 Reply
firm-tan
firm-tanOP•9mo ago
I just found out, if I make this function private it works. (That means clerk components are shown.) 
const authenticateUserWithoutAPI = async () => {
  await db.select().from(usersTable);

  throw redirect({ to: "/" });
};
const authenticateUserWithoutAPI = async () => {
  await db.select().from(usersTable);

  throw redirect({ to: "/" });
};
Additional findings that I don't understand. If I define beforeLoad like this: 
beforeLoad: async () => {
  const result = await db.select().from(usersTable);
}
beforeLoad: async () => {
  const result = await db.select().from(usersTable);
}
The Clerk sign-in component renders, and the TanStack Router dev tools work as expected. However, if I slightly modify the function by removing the const result assignment:: 
beforeLoad: async () => {
  await db.select().from(usersTable);
}
beforeLoad: async () => {
  await db.select().from(usersTable);
}
The Clerk sign-in component stops rendering, and the TanStack Router dev tools disappear.

Did you find this page helpful?