Kehvyn
Kehvyn
PostsComments
SSolidJS
Created by Kehvyn on 2/24/2025 in #support
Debugging "Error: Can't render headers after they are sent to the client."
I think I've got everything working now. Thank for your help, and the Solid crash course. Now I just need someone to officially pick up the PR on Github. I assume someone has seen it, I'm not in a hurry. That said, any tips on next steps would be appreciated 🙂
18 replies
SSolidJS
Created by Kehvyn on 2/24/2025 in #support
Debugging "Error: Can't render headers after they are sent to the client."
Yeah it worked fine without it, so I removed it. This is my first major project with Solid, and I'm coming from React, so the React-isms will inevitably leak in.
18 replies
SSolidJS
Created by Kehvyn on 2/24/2025 in #support
Debugging "Error: Can't render headers after they are sent to the client."
I wasn't sure if I could force the actions to only run on the client. It does seem to work without it, but is there a better way to tell solid that the action is absolutely 100% client only? The createEffect is taken right out of the supabase docs for SolidJS. https://supabase.com/docs/guides/getting-started/tutorials/with-solidjs#launch but it doesn't seem to be necessary.
18 replies
SSolidJS
Created by Kehvyn on 2/24/2025 in #support
Debugging "Error: Can't render headers after they are sent to the client."
I realized it probably didn't know the session had updated, because it was happening over in the supabase client and NOT within Solid's reactivity. So I threw the Supabase session into a signal, subscribed to updates with supabases's built in helper, put that in a context, and moved all my actions that affect auth unto the client. That seems to have worked, and now my PR is live https://github.com/solidjs/solid-start/pull/1830 😄
18 replies
SSolidJS
Created by Kehvyn on 2/24/2025 in #support
Debugging "Error: Can't render headers after they are sent to the client."
Moving things to the client simplified things a lot. I can't make an isomorphic client, so my actions need to be either client-side or server-side. Now I'm having a new problem. This might be worth it's own thread. This feels like the simplest thing. An async function returning an object, but it's fighting me. 
export const getUser = query(async () => {
  "use client";
  const supabase = createClient();
  const { data: { user } } = await supabase.auth.getUser();
  return user;
}, "user");
export const getUser = query(async () => {
  "use client";
  const supabase = createClient();
  const { data: { user } } = await supabase.auth.getUser();
  return user;
}, "user");
I've tried that basic function in a query and as a createResource fetcher, and neither Show nor Suspense give me consistent results. 
export function Navigation() {
  const location = useLocation();
  const [user] = createResource(async () => {
    "use client";
    const supabase = createClient();
    const { data: { user } } = await supabase.auth.getUser();
    return user;
  });

  const signOut = useAction(signOutAction);

  const active = (path: string) =>
    path == location.pathname ? "border-sky-600" : "border-transparent hover:border-sky-600";

  return (
    <nav class="bg-sky-800">
      <ul class="container flex items-center p-3 text-gray-200">
        <li class={`border-b-2 ${active("/sign-up")} mx-1.5 sm:mx-6`}>
          <A href="/sign-up">Sign Up</A>
        </li>
        <li class={`border-b-2 ${active("/sign-in")} mx-1.5 sm:mx-6`}>
          <A href="/sign-in">Sign In</A>
        </li>
        <Suspense fallback={<li>Loading...</li>}>
          {user() ? (
            <li class={`border-b-2 ${active("nonsense-route")} mx-1.5 sm:mx-6`}>
              <button onClick={() => signOut()}>Sign Out</button>
            </li>
          ) : null}
        </Suspense>
      </ul>
    </nav>
  );
}
export function Navigation() {
  const location = useLocation();
  const [user] = createResource(async () => {
    "use client";
    const supabase = createClient();
    const { data: { user } } = await supabase.auth.getUser();
    return user;
  });

  const signOut = useAction(signOutAction);

  const active = (path: string) =>
    path == location.pathname ? "border-sky-600" : "border-transparent hover:border-sky-600";

  return (
    <nav class="bg-sky-800">
      <ul class="container flex items-center p-3 text-gray-200">
        <li class={`border-b-2 ${active("/sign-up")} mx-1.5 sm:mx-6`}>
          <A href="/sign-up">Sign Up</A>
        </li>
        <li class={`border-b-2 ${active("/sign-in")} mx-1.5 sm:mx-6`}>
          <A href="/sign-in">Sign In</A>
        </li>
        <Suspense fallback={<li>Loading...</li>}>
          {user() ? (
            <li class={`border-b-2 ${active("nonsense-route")} mx-1.5 sm:mx-6`}>
              <button onClick={() => signOut()}>Sign Out</button>
            </li>
          ) : null}
        </Suspense>
      </ul>
    </nav>
  );
}
I can tell it's not working because I have a Protected page that does work. So if I can be on the protected page, but not see the Sign Out, then something is wrong. And when I log user it's always null/undefined.
18 replies
SSolidJS
Created by Kehvyn on 2/24/2025 in #support
Debugging "Error: Can't render headers after they are sent to the client."
I'm not sure, but I think I ran into a problem with Vinxi not tree-shaking. I'm still testing it. Hopefully when the example repo is available to the world, people can learn from all these painful lessons 😆 I keep seeing errors in the console about AsyncLocalStorage not having a browser polyfill, which tells me something has gone very wrong. That, and it's just generally not stable, which usually means some kind of import error or library issue.
18 replies
SSolidJS
Created by Kehvyn on 2/24/2025 in #support
Debugging "Error: Can't render headers after they are sent to the client."
Yeah that matches my thoughts as well. All these actions hit Supabase's API anyway, they don't need to be server only
18 replies
SSolidJS
Created by Kehvyn on 2/24/2025 in #support
Debugging "Error: Can't render headers after they are sent to the client."
This is what I'm working on: https://github.com/kjrocker/solid-start/blob/supabase-auth-example/examples/with-supabase-auth/src/util/supabase/actions.ts
18 replies
SSolidJS
Created by Kehvyn on 2/24/2025 in #support
Debugging "Error: Can't render headers after they are sent to the client."
Oooh that is deviously difficult. By pulling out all other queries, I was able to get it to work. So clearly I've got the same kind of race condition you dealt with. I'll have to do a deep dive on the responses. I'm not sure how I can slow this down though. Maybe the server-side client needs to be some kind of singleton.
18 replies