wise-white

Client not hydrating. no error message

Hi, I really want to give tanstack start a try, so I experimented with converting my nextjs app. I followed the migration guide here: https://tanstack.com/start/latest/docs/framework/react/migrate-from-next-js. I managed to get a couple of my pages rendering, but it seems only SSR is working (ie. the client never "hydrates"). I don't get any error messages. I tried removing most of the code for a single page and managed to get the client to hydrate and started adding code back in, but it's really unclear what causes the issue. In one case, simply importing a package (pino-pretty) caused it to stop working. This is so difficult to try to figure out that I'm tempted to give up. Besides this I'm getting weird vite build issues in third party packages too. Anyone have any ideas for how I can debug this or what causes it? Any help is greatly appreciated.

34 Replies

fascinating-indigo•3mo ago

don't you get any errors in the browser console? also if you can share a complete project I can have a look

wise-whiteOP•3mo ago

I do see an error about server code that seems to be trying to run on the client:

chunk-OMO6KEFB.js?v=198f82de:1054 Uncaught (in promise) Error: Extensions.defineExtension is unable to run in this browser environment, or has been bundled for the browser (running in ).
In case this error is unexpected for you, please report it in https://pris.ly/prisma-prisma-bug-report

chunk-OMO6KEFB.js?v=198f82de:1054 Uncaught (in promise) Error: Extensions.defineExtension is unable to run in this browser environment, or has been bundled for the browser (running in ).
In case this error is unexpected for you, please report it in https://pris.ly/prisma-prisma-bug-report

could this be the cause? Not sure why it's trying to run on the client. Maybe I imported something incorrectly?

fascinating-indigo•3mo ago

yes thats most likely the issue seems like your client bundle contains prisma how do you access prisma? in your loader?

wise-whiteOP•3mo ago

I'm using ORPC. I access a prisma instance directly from ORPC procedure handlers. I import the prisma instance into the file where I need it (not from context). I followed this guide: https://orpc.unnoq.com/docs/adapters/tanstack-start#optimize-ssr

TanStack Start Adapter - oRPC

Use oRPC inside a TanStack Start project

wise-whiteOP•3mo ago

do you know of a good way to enforce server code doesn't run on the client? or an easy way to debug it? My best guess is that the router imported to create an orpc client is bringing in everything, even though it is only used in the server() part of createIsomorphicFn()

fascinating-indigo•3mo ago

if it is only used in there, then it will be compiled away for the client can you share your project?

wise-whiteOP•3mo ago

it's a private project, but I could give you temporary read-only access if you want

fascinating-indigo•3mo ago

sure i can have a look

wise-whiteOP•3mo ago

okay I've added you I'm not sure what you're able to see but it's in the tanstack-start+better-auth branch

fascinating-indigo•3mo ago

can see that. how can i most easily start the dev server? do i need all that doppler stuff?

wise-whiteOP•3mo ago

shoot i guess you would. it might work with just an env file. I'll try

fascinating-indigo•3mo ago

i have it running already

wise-whiteOP•3mo ago

that was fast

fascinating-indigo•3mo ago

got that same error

Uncaught (in promise) Error: Extensions.defineExtension is unable to run in this browser environment, or has been bundled for the browser (running in ).

you export this function which accesses the db

export const createORPCContext = async (opts: { headers: Headers }) => {
  const session = await auth.api.getSession({
    headers: opts.headers,
  });

  return {
    db,
    session: session,
    ...opts,
  };
};

export const createORPCContext = async (opts: { headers: Headers }) => {
  const session = await auth.api.getSession({
    headers: opts.headers,
  });

  return {
    db,
    session: session,
    ...opts,
  };
};

wise-whiteOP•3mo ago

yea I guess other than the handlers that is one place I do. Should it not be in there? I guess i don't use db from context

fascinating-indigo•3mo ago

i need to dig in deeper

wise-whiteOP•3mo ago

thank you for looking at this btw. it was driving me crazy

fascinating-indigo•3mo ago

we have an env var you can enable to look at the compilation output

export TSR_VITE_DEBUG=true

export TSR_VITE_DEBUG=true

fascinating-indigo•3mo ago

so you can see a diff for client vs server per file

fascinating-indigo•3mo ago

ok it's verbatimModuleSyntax

fascinating-indigo•3mo ago

https://tanstack.com/start/latest/docs/framework/react/build-from-scratch

Build a Project from Scratch | TanStack Start React Docs

[!NOTE] If you chose to quick start with an example or cloned project, you can skip this guide and move on to the guide. So you want to build a TanStack Start project from scratch? This guide will hel...

fascinating-indigo•3mo ago

wise-whiteOP•3mo ago

oh that's cool

fascinating-indigo•3mo ago

got at new error now

wise-whiteOP•3mo ago

hmm I had to do some weird stuff with Semaphore with vite it worked fine with nextjs this thing

const SemaphoreInternal =
  // @ts-expect-error https://github.com/jsoendermann/semaphore-async-await/issues/8
  (SemaphoreModule as never).default as typeof SemaphoreModule;
export class Semaphore extends SemaphoreInternal {}

const SemaphoreInternal =
  // @ts-expect-error https://github.com/jsoendermann/semaphore-async-await/issues/8
  (SemaphoreModule as never).default as typeof SemaphoreModule;
export class Semaphore extends SemaphoreInternal {}

fascinating-indigo•3mo ago

it's not a proper ESM module 😦

wise-whiteOP•3mo ago

ah I'll probably just copy/paste it in to my repo then that's an easy enough fix okay I pushed it

fascinating-indigo•3mo ago

i had to replace the import of Semaphore in a few places now got

<ServerApp> is an async Client Component. Only Server Components can be async at the moment. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

<ServerApp> is an async Client Component. Only Server Components can be async at the moment. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

so there is some more stuff to do probably just remove async there

wise-whiteOP•3mo ago

nice, how did you get past the prisma error?

fascinating-indigo•3mo ago

verbatimModuleSyntax: false also ReactQueryDevtools wont work as you are not rendering them inside the query client provider if you want i can push my state

wise-whiteOP•3mo ago

sure, that's fine

fascinating-indigo•3mo ago

probably need write access? did not check

wise-whiteOP•3mo ago

I don't think i can change your permissions since it's a personal repo you should have write oh sorry just realized you posted about the verbatim thing. I'll look into that more thank you so much for your help

fascinating-indigo•3mo ago

see branch fix-start-hydration-errors

Gaming

Programming

Client not hydrating. no error message

Did you find this page helpful?