T
TanStack•9mo ago
constant-blue

Blank page after navigating

I have a piece of code here that works in TanStack Router, but not in TanStack Start.
const createContact = useServerFn(createContactFn)

const handleOnSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const contact = await createContact();
await navigate({
to: `/contacts/${contact.id}/edit`,
});
};
const createContact = useServerFn(createContactFn)

const handleOnSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const contact = await createContact();
await navigate({
to: `/contacts/${contact.id}/edit`,
});
};
It goes white page after navigating. I have to hard reload the browser in order to see the content.
9 Replies
mute-gold
mute-gold•9mo ago
would need a minimal reproducer
constant-blue
constant-blueOP•9mo ago
Sure. Here it is. https://github.com/webmasterdevlin/tanstack-router-contact-app/tree/tanstack-start I am migrating a TanStack Router Contact App to TanStack Start. I am still learning TanStack Start.
GitHub
GitHub - webmasterdevlin/tanstack-router-contact-app at tanstack-start
Contribute to webmasterdevlin/tanstack-router-contact-app development by creating an account on GitHub.
constant-blue
constant-blueOP•9mo ago
npm run dev. The new button should create a contact object and navigate to its edit page. I converted This React Router 6 and Remix tutorial to TanStack Router. Now, I am creating a version of TanStack Start. I get this HierarchyRequestError in the browser's console log.
constant-blue
constant-blueOP•9mo ago
Medium
How to debug Nuxt Hierarchy Request Error
Hydration is tricky (physically and programatically), debugging production-only issues is even trickier (mentally and emotionally).
constant-blue
constant-blueOP•9mo ago
Downgraded it to react 18. I think it fixed it. The problem now is different. PrismaClient is unable to run in this browser environment, but I am running it in useServerFn and the console logs are on the server. Not in the browser.
mute-gold
mute-gold•9mo ago
and which errors do you get for Prisma?
constant-blue
constant-blueOP•9mo ago
Looks like it is running to calls. One good, and one is bad. I will check. Probably in the loaders when I am trying to fetch it after navigating. Fixed now. I am refetching contacts by default and another one contact id. Noticed they are not using the server functions that I created. Thanks! @Manuel Schiller
mute-gold
mute-gold•9mo ago
well did not do much than rubber ducking here 🤪
constant-blue
constant-blueOP•9mo ago
haha. but still haha. I am adding these questions here for the others also to avoid.

Did you find this page helpful?