Next.js Discord

Discord Forum

NextAuth: error with server action when deployed to vercel

Answered
Bumble bee posted this in #help-forum
Open in Discord
Bumble beeOP
I'm not able to deploy my NextAuth site to Vercel. It's based off the example project: https://github.com/nextauthjs/next-auth-example

The following is shown when I open the page once deployed:
"Application error: a server-side exception has occurred (see the server logs for more information)."

The browser console says:
Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.


I have set the NEXTAUTH_URL and NEXTAUTH_SECRET environment variables but no dice, and I can't reproudce this locally
Answered by Western paper wasp
so I would do like

page.tsx:
import { submitAppeal } from "./submit-action.ts";

export default async function Page() {
  const session = await auth();

  return (
    <div className="space-y-2">
      {!session?.user ? (
        <p>
          To continue, please <em>Sign In</em> with Discord first.
        </p>
      ) : (
        <div className="pt-4">
          <form>
           // ...
          </form>
        </div>
      )}
    </div>
  );
}


submit-action.ts:
"use server";

async function submitAppeal(formData: FormData) {
  const session = await auth();

  if (!session || !session.user) {
    return;
  }

  // send data to Discord webhook
  const sendWehookResponse = await sendAppealToWehook(session, formData);

  if (sendWehookResponse.status !== 204) {
    redirect("/error?message=Failed to submit appeal, please try again or contact..");
  }

  const addUserResponse = await addUserToGuild(
    session.user.id!,
    // @ts-ignore
    session.sessionToken,
  );

  if (addUserResponse.status !== 201) {
    redirect(
      "/error?message=Failed to add user to guild, please try again or contact..",
    );
  }

  redirect("/success");
}
View full answer

35 Replies

Bumble beeOP
the example repo works just fine deployed so it's something to do with my code. i've narrowed it down to this server action submitAppeal. if i remove the body of it, it deploys fine. what am i doing wrong here?

export default async function Page() {
  const session = await auth();

  async function submitAppeal(formData: FormData) {
    "use server";

    if (!session || !session.user) {
      return;
    }

    // send data to Discord webhook
    const sendWehookResponse = await sendAppealToWehook(session, formData);

    if (sendWehookResponse.status !== 204) {
      redirect("/error?message=Failed to submit appeal, please try again or contact..");
    }

    const addUserResponse = await addUserToGuild(
      session.user.id!,
      // @ts-ignore
      session.sessionToken,
    );

    if (addUserResponse.status !== 201) {
      redirect(
        "/error?message=Failed to add user to guild, please try again or contact..",
      );
    }

    redirect("/success");
  }

  return (
    <div className="space-y-2">
      {!session?.user ? (
        <p>
          To continue, please <em>Sign In</em> with Discord first.
        </p>
      ) : (
        <div className="pt-4">
          <form>
           // ...
          </form>
        </div>
      )}
    </div>
  );
}
Western paper wasp
Can you look in the logs on vercel to find out what the “omitted” error message is?
@Western paper wasp Can you look in the logs on vercel to find out what the “omitted” error message is?
Bumble beeOP
oh hmm
TypeError: Cannot read properties of null (reading 'user')
    at x (/var/task/.next/server/app/page.js:1:4889)
how can i figure out where that is?
Western paper wasp
as far as I can see your .user accesses look safe within the code you posted
Bumble beeOP
yeah, seems like that to me
I can post the entire thing. let me try one thing first though
also it works fine locally
Western paper wasp
sometimes I debug by putting like 

console.log('a')
...
console.log('b')
...
console.log('c')
...

between different statements in my code, and then you will be able to see in the server logs where the error happens by what was the last letter that was printed
if that makes sense
could help you narrow down which part of your function contains the bad .user access
Bumble beeOP
oh yeah, good idea. let me do that
Bumble beeOP
@Western paper wasp so it doesn't log any of the console logs actually lol
it never even renders the initial page component i guess
this makes no sense. when i get rid of the body of submitAppeal it deploys fine
am i using server actions correctly though? this is my first time ever doing something like this
i normally do plain react
Western paper wasp
Do you have a console log outside of the submitAppeal function (i.e. right before your const session = await auth())?
Maybe try moving your submitAppeal function from inside the Page component to a separate file, called like submit-action.ts and with "use server" at the top of the file
I don’t really trust the bundler stuff that code-splits server actions from components while preserving variable closures lol
less opportunity for side effects if your server action is in its own file and not sharing variables with your component—otherwise, it’s possible that there’s something about the way that nextjs bundles and splits your file that could interfere with its functionality
Western paper wasp
so I would do like

page.tsx:
import { submitAppeal } from "./submit-action.ts";

export default async function Page() {
  const session = await auth();

  return (
    <div className="space-y-2">
      {!session?.user ? (
        <p>
          To continue, please <em>Sign In</em> with Discord first.
        </p>
      ) : (
        <div className="pt-4">
          <form>
           // ...
          </form>
        </div>
      )}
    </div>
  );
}


submit-action.ts:
"use server";

async function submitAppeal(formData: FormData) {
  const session = await auth();

  if (!session || !session.user) {
    return;
  }

  // send data to Discord webhook
  const sendWehookResponse = await sendAppealToWehook(session, formData);

  if (sendWehookResponse.status !== 204) {
    redirect("/error?message=Failed to submit appeal, please try again or contact..");
  }

  const addUserResponse = await addUserToGuild(
    session.user.id!,
    // @ts-ignore
    session.sessionToken,
  );

  if (addUserResponse.status !== 201) {
    redirect(
      "/error?message=Failed to add user to guild, please try again or contact..",
    );
  }

  redirect("/success");
}
Answer
Western paper wasp
that way the boundaries between everything are clear, and there’s no chance that Next is mangling your auth stuff by magic code splitting
@Western paper wasp Do you have a console log outside of the `submitAppeal` function (i.e. right before your `const session = await auth()`)?
Bumble beeOP
oh good point. i just added this now:
and i can see those
Bumble beeOP
oh my god it worked @Western paper wasp
i love you so much
THANK YOU
i don't understand why the action can't be within the component but i will TAKE IT
Western paper wasp
haha awesome
feel free to mark as solution!
Bumble beeOP
do you mind if I ask you something unrelated?
Western paper wasp
sure
@Western paper wasp sure
Bumble beeOP
never mind. was going to ask how you would show a toast to handle errors in the server action but i found a video that explains it