aws-amplify / aws-amplify/amplify-hosting

503 response occured when page using react-three/processing on Next.js

Open
#2,477 1 comment 0 reactions 0 assignees View on GitHub
hosting ssr
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-console/blob/master/FAQ.md).
- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-console/issues?q=is%3Aissue+).
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-console/blob/master/CONTRIBUTING.md).
- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

### App Id

arn:aws:amplify:ap-northeast-1:115531481070:apps/d3sjv73f449jem

### Region

ap-northeast-1

### Amplify Console feature

Not applicable

### Describe the bug

I'm trying to create a web page using Next.js, react-three/fiber, and react-three/processing, but I'm getting a 503 error when accessing the page using EffectComposer.

After a lot of testing, the following code is causing the problem.
`const a = `

In the build environment, I ran `ls -R . /.next` in the build environment and it built fine, but when I looked at the S3 bucket associated with Amplify, the HTML file was not generated under /static-pages only for the page with the corresponding code.
When I host the same repository on Vercel, it works fine, so I think the problem is in the deployment of Amplify.

### Expected behavior

The generated static file is placed in S3 and responds properly to requests without 503 errors.

### Reproduction steps

1. npx create-next-app
2. npm install @react-three/fiber @react-three/processing
3. add`const a = ` in index.js
4. Hosting with Amplify

### Build Settings

```yaml
## amplify.yml
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*

## Build image settings
Next.js version latest
Node.js version 12
```

### Additional information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the reported 503 with the provided Next.js setup using `@react-three/fiber` and `@react-three/processing`, then inspect the Amplify deployment output and S3 contents for the missing static page. The issue identifies the `EffectComposer` component and build settings, but does not name repository files or tests; done means the page's generated HTML is deployed and requests no longer return 503.

Written by the indexing model from the issue text.

Assessment

Tech stack
aws, next.js, react
Domain
backend, cloud
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.