SolidJS•12mo ago

Using "use server"; But My Code Is Still Showing On Client. Why?

I'm trying to implement the new "use server"; comment to force parts of my code to run on the server. But it doesn't appear to be working. Here's an example. I have a AuthService.ts file that uses Supabase Auth. I'm trying to force the "delete user" code to run on the server. Here's the code:

  async function supabaseDeleteAccount(session: AuthSession) {
    // set loading true
    setSupabaseAuthLoading(true);
    try {
      "use server";
      const { error } = await supabaseServer.auth.admin.deleteUser(session.user.id);
      if (error) throw error;
      navigate("/", { replace: true });
    } catch (error: any) {
      // log the error and set the error state
      console.log(error.message);
      setSupabaseError(error.message);
    } finally {
      // set loading false
      setSupabaseAuthLoading(false);
    }
  }

  async function supabaseDeleteAccount(session: AuthSession) {
    // set loading true
    setSupabaseAuthLoading(true);
    try {
      "use server";
      const { error } = await supabaseServer.auth.admin.deleteUser(session.user.id);
      if (error) throw error;
      navigate("/", { replace: true });
    } catch (error: any) {
      // log the error and set the error state
      console.log(error.message);
      setSupabaseError(error.message);
    } finally {
      // set loading false
      setSupabaseAuthLoading(false);
    }
  }

My expectation, is that the code inside of the try block would run on the server. But if I run npm run dev and look at my AuthService.ts file in the Chrome Dev Tools Network tab, this is what I see...

async function supabaseDeleteAccount(session) {
        setSupabaseAuthLoading(true);
        try {
            "use server";
            const {error} = await supabaseServer.auth.admin.deleteUser(session.user.id);
            if (error)
                throw error;
            navigate("/", {
                replace: true
            });
        } catch (error) {
            console.log(error.message);
            console.log(error);
            setSupabaseError(error.message);
        } finally {
            setSupabaseAuthLoading(false);
        }
    }

async function supabaseDeleteAccount(session) {
        setSupabaseAuthLoading(true);
        try {
            "use server";
            const {error} = await supabaseServer.auth.admin.deleteUser(session.user.id);
            if (error)
                throw error;
            navigate("/", {
                replace: true
            });
        } catch (error) {
            console.log(error.message);
            console.log(error);
            setSupabaseError(error.message);
        } finally {
            setSupabaseAuthLoading(false);
        }
    }

Shouldn't the code below "use server"; in the try block NOT be visible in Chrome? Am I doing something wrong? Or is this a bug? Thanks, Chris

4 Replies

lxsmnsyc•12mo ago

you need "use server" to be the first line of the function. "use server" is only for functions and modules, not for blocks

ChrisThornhamOP•12mo ago

Thank you! This would be a great addition to the docs.

lxsmnsyc•12mo ago

it's kinda mentioned in the docs

ChrisThornhamOP•12mo ago

Haha. I agree. I hope I don’t sound like I’m complaining. I'm just sharing my experience as I try to teach myself SolidStart. I’m a relatively new dev, but I think explicitly saying that “use server”; MUST be the first line of a function or module would add some clarity. It would be even more helpful if the docs showed quick examples of correct and incorrect usage. I’d happily write up and submit what I'm describing if doing so is welcome. I know building SS is a huge undertaking.

Gaming

Programming

Using "use server"; But My Code Is Still Showing On Client. Why?