aws-amplify / aws-amplify/amplify-hosting
Application error: a server-side exception has occurred (see the server logs for more information).
- Dominant language
- Dockerfile
- Stars
- 481
- Forks
- 123
- PR merge metrics
- No merged PRs in 30d
Description
### Before opening, please confirm:
- [X] I have checked to see if my question is addressed in the [FAQ](https://github.com/aws-amplify/amplify-hosting/blob/master/FAQ.md).
- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-hosting/issues?q=is%3Aissue+).
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-hosting/blob/master/CONTRIBUTING.md).
- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
- [X] I have removed any sensitive information from my code snippets and submission.
### App Id
I'll ask my backend team and update it
### AWS Region
ap-southeast-1
### Amplify Hosting feature
Backend builds, Deployments, Frontend builds
### Frontend framework
Next.js
### Next.js version
13.5.3
### Next.js router
App Router
### Describe the bug
I have a next js app with next auth and it got deployed on aws amplify, and it's not working when it got deployed on aws amplify the app is really breaking and not even working and it's working on local.
It's nextjs app with the app router with next auth and backend with the graphql and deployed on AWS amplify
```html
Application error: a server-side exception has occurred (see the server logs for more information).
Digest: 4286476458
```
```js
49-f394e00ab3312384.js:1 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 in this error instance which may provide additional details about the nature of the error.
```
I'm getting the above errors
Here's my setup
`next.config.js`
```js
/** @type {import('next').NextConfig} */
const config = {
webpack(config) {
config.resolve.fallback = {
...config.resolve.fallback,
fs: false,
};
return config;
},
images: {
remotePatterns: [
{
hostname: "*",
},
],
},
env: {
RECAPTCHA_SECRET_KEY: process.env.NEXT_PUBLIC_RECAPTCHA_SECRET_KEY,
RECAPTCHA_SITE_KEY: process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY,
NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET
},
experimental: {
serverActions: true,
typedRoutes: false,
},
// FIXME !!TEMPORARY FIX!! because checkout directory has many errors
typescript: {
ignoreBuildErrors: true,
},
eslint: {
ignoreDuringBuilds: true,
},
};
export default config;
```
`auth.ts`
```ts
import axios from "axios";
import { type NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
// import { type Amplify } from "aws-amplify";
// import awsExports from "@aws-amplify/ui-react";
import { API_URL } from "@/lib/gql";
import { UserLoginDocument, type UserLoginMutation } from "@/gql/graphql";
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
// Amplify.configure({ ...awsExports, ssr: true });
export const authOptions: NextAuthOptions = {
secret: process.env.NEXTAUTH_SECRET as string,
session: {
strategy: "jwt",
maxAge: 24 * 60 * 60,
},
pages: {
signIn: "/en/login",
},
providers: [
// GoogleProvider({
// }),
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
CredentialsProvider({
id: "credentials",
name: "Credentials",
credentials: {
email: { type: "email", label: "Email" },
password: { type: "password", label: "Password" },
remember: { type: "bool", label: "Remember me" },
},
authorize: async (credentials: { email: string; password: string } | undefined) => {
const { email, password } = credentials || {};
const res = await axios.post<{ data: UserLoginMutation }>(API_URL, {
query: UserLoginDocument,
variables: { email, password },
});
if (res.status !== 200) {
return null;
}
if (res.data?.data.userLogin?.token) {
return {
id: email || "",
email,
...(res.data?.data.userLogin || {}),
};
} else {
return null;
}
},
}),
],
callbacks: {
jwt: async ({ account, token }) => {
if (account) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
token.accessToken = account.access_token;
}
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return token;
},
},
};
```
`route.ts` in app/api/auth/[..nextauth]
```js
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import NextAuth from "next-auth";
import { authOptions } from "@/lib/auth";
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
```
`amplify.yml` in the root folder
```yml
version: 1
frontend:
phases:
preBuild:
commands:
- npm install -g pnpm
- pnpm install --frozen-lockfile
build:
commands:
- touch .env
- echo "NEXTAUTH_SECRET=$NEXTAUTH_SECRET" >> .env
- echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env
- pnpm run i18n && next build
artifacts:
baseDirectory: .next
files:
- "**/*"
cache:
paths:
- node_modules/**/*
```
### Expected behavior
It should working without any errorsbe working
### Reproduction steps
1. Add the nextauth on nextjs app and deploy on the aws amplify and then it'll will be produce
### Build Settings
```yaml
version: 1
frontend:
phases:
preBuild:
commands:
- npm install -g pnpm
- pnpm install --frozen-lockfile
build:
commands:
- touch .env
- echo "NEXTAUTH_SECRET=$NEXTAUTH_SECRET" >> .env
- echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env
- pnpm run i18n && next build
artifacts:
baseDirectory: .next
files:
- "**/*"
cache:
paths:
- node_modules/**/*
```
### Log output
```
# Put your logs below this line
Application error: a server-side exception has occurred (see the server logs for more information).
Digest: 4286476458
49-f394e00ab3312384.js:1 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.
```
### Additional information
_No response_
Contributor guide
Research direction
The report names next.config.js, auth.ts, route.ts, and amplify.yml but provides no server-side exception or repository test. Start by reviewing those deployment settings alongside the Amplify server logs; done would require a reproducible failure and a confirmed configuration or product fix.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- aws, graphql, next.js, typescript
- Domain
- backend-api-design, cloud, devops
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 18/100