Error 503 on pages with getServerSideProps with NextJS

[AndyW22]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Next.js

Amplify APIs

Authentication, GraphQL API

Amplify Categories

auth, function

Environment information

``` System: OS: macOS 11.3.1 CPU: (8) x64 Apple M1 Memory: 99.48 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 15.5.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.5.4 - /usr/local/bin/npm Browsers: Chrome: 90.0.4430.212 Firefox: 88.0.1 Safari: 14.1 npmPackages: @ampproject/toolbox-optimizer: undefined () @babel/core: undefined () @material-ui/core: ^4.11.3 => 4.11.4 @material-ui/icons: ^4.11.2 => 4.11.2 @material-ui/lab: ^4.0.0-alpha.57 => 4.0.0-alpha.58 @reduxjs/toolkit: ^1.5.0 => 1.5.1 @types/jest: ^26.0.22 => 26.0.23 @types/nprogress: ^0.2.0 => 0.2.0 @types/react: ^17.0.3 => 17.0.6 @types/react-google-recaptcha: ^2.1.0 => 2.1.0 @types/react-material-ui-form-validator: ^2.1.0 => 2.1.0 @types/redux-logger: ^3.0.8 => 3.0.8 @types/styled-components: ^5.1.9 => 5.1.9 @typescript-eslint/eslint-plugin: ^4.19.0 => 4.24.0 @typescript-eslint/parser: ^4.19.0 => 4.24.0 amphtml-validator: undefined () arg: undefined () async-retry: undefined () async-sema: undefined () aws-amplify: 4.0.0 => 4.0.0 aws-sdk: ^2.917.0 => 2.917.0 axios: ^0.21.1 => 0.21.1 bfj: undefined () cacache: undefined () ci-info: undefined () comment-json: undefined () compression: undefined () conf: undefined () content-type: undefined () cookie: undefined () css-loader: undefined () cypress: 7.3.0 => 7.3.0 cypress-fail-on-console-error: ^2.1.0 => 2.1.0 debug: undefined () devalue: undefined () escape-string-regexp: undefined () eslint: ^7.22.0 => 7.27.0 eslint-config-prettier: ^8.1.0 => 8.3.0 eslint-plugin-react: ^7.23.1 => 7.23.2 file-loader: undefined () find-cache-dir: undefined () find-up: undefined () fresh: undefined () gzip-size: undefined () http-proxy: undefined () husky: ^6.0.0 => 6.0.0 ignore-loader: undefined () is-animated: undefined () is-docker: undefined () is-wsl: undefined () json5: undefined () jsonwebtoken: undefined () lint-staged: ^11.0.0 => 11.0.0 loader-utils: undefined () lodash.curry: undefined () lru-cache: undefined () mini-css-extract-plugin: undefined () mocha: ^8.3.2 => 8.4.0 mochawesome: 6.2.2 => 6.2.2 nanoid: undefined () neo-async: undefined () next: ^10.2.0 => 10.2.2 next-redux-wrapper: ^7.0.0-rc.2 => 7.0.0-rc.2 nprogress: ^0.2.0 => 0.2.0 ora: undefined () postcss-flexbugs-fixes: undefined () postcss-loader: undefined () postcss-preset-env: undefined () postcss-scss: undefined () prettier: ^2.2.1 => 2.3.0 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 react-google-recaptcha: ^2.1.0 => 2.1.0 react-material-ui-form-validator: ^2.1.4 => 2.1.4 react-redux: ^7.2.3 => 7.2.4 react-responsive-modal: ^6.0.1 => 6.0.1 recast: undefined () redux-logger: ^3.0.6 => 3.0.6 resolve-url-loader: undefined () sass-loader: undefined () schema-utils: undefined () semver: undefined () send: undefined () source-map: undefined () start-server-and-test: ^1.12.1 => 1.12.2 string-hash: undefined () strip-ansi: undefined () styled-components: ^5.2.3 => 5.3.0 styled-components/macro: undefined () styled-components/native: undefined () styled-components/primitives: undefined () terser: undefined () text-table: undefined () typescript: ^4.2.3 => 4.2.4 unistore: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () npmGlobalPackages: @aws-amplify/cli: 4.41.2 eslint: 7.16.0 nodemon: 2.0.7 npm: 7.5.4 react-devtools: 4.10.1 source-map-explorer: 2.5.2 superplate-cli: 1.0.7 superplate: 0.0.1 typescript-express-starter: 4.3.0 typescript: 4.2.4 yarn: 1.22.10 ```

Describe the bug

Every page that uses getServerSideProps gives a 503 when hosted on amplify:

This error doesn't occur on pages that are statically generated, the /404 page (which usually has SSG) will load fine, but every server side rendered page has the above error.

This error has only started in the last couple weeks or so, as I have tried redeploying projects that haven't changed at all and this error still occurs. This also happens with a repo using the nextjs template.

Expected behavior

The pages loads correctly

Reproduction steps

1. fork https://github.com/AndyW22/amplifyssrbug
2. go to amplify console and add the repo as a new app with github. (Check that the build directory is .next on amplify.yml in the setup)
3. once deployed, the main page will give a 503. (interestingly the 404 also doesnt work, it doesn't give a 503 but just a blank page, unsure of why that is.)
4. go to deploy tab on your app on amplify, copy the SSR: lambda @edge name. Go to cloudwatch and search that for a log group, view the log and you should see:

{
    "errorType": "Error",
    "errorMessage": "Cannot find module '../chunks/748.js'\nRequire stack:\n- /var/task/pages/index.js\n- /var/task/index.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js",
    "code": "MODULE_NOT_FOUND",
    "requireStack": [
        "/var/task/pages/index.js",
        "/var/task/index.js",
        "/var/runtime/UserFunction.js",
        "/var/runtime/index.js"
    ],
    "stack": [
        "Error: Cannot find module '../chunks/748.js'",
        "Require stack:",
        "- /var/task/pages/index.js",
        "- /var/task/index.js",
        "- /var/runtime/UserFunction.js",
        "- /var/runtime/index.js",
        "    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)",
        "    at Function.Module._load (internal/modules/cjs/loader.js:667:27)",
        "    at Module.require (internal/modules/cjs/loader.js:887:19)",
        "    at require (internal/modules/cjs/helpers.js:74:18)",
        "    at Object.__webpack_require__.f.require (/var/task/pages/index.js:559:28)",
        "    at /var/task/pages/index.js:484:40",
        "    at Array.reduce (<anonymous>)",
        "    at Function.__webpack_require__.e (/var/task/pages/index.js:483:67)",
        "    at Function.__webpack_require__.x (/var/task/pages/index.js:575:33)",
        "    at /var/task/pages/index.js:586:57"
    ]
}

The repo used is complete stock app with added getServerSideProps to index.js. If you want to make your own repo, simply run yarn create next-app and add the getServerSideProps from the above repo.

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

the lambda edge is deployed on us-east-1 whilst my project isn't.

[dletozeun]

Hi,

I reproduce the 503 error with the same error in the lambda deploying your repo.

However, something that is also happening is that the CloudWatch logs of the lambda are not in the Amplify app deployed region but a different (random?) one.

For example deploying the app to the eu-west-2 region, the logs are visible in eu-west-1 region, deploying to eu-west-1 and the logs are in eu-central-1 region.

Not everyone seems to reproduce this problem however.

[AndyW22]

I managed to find out what causes this, it is nextjs V10.2.1, to avoid this error stick with 10.2.0 (or 9.5.6, since amplify technically doesn't support V10+ yet)

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.