aws-amplify / aws-amplify/amplify-hosting
503 response occured when page using react-three/processing on Next.js
- 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
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