Nextjs Lambda function associated with the CloudFront distribution is invalid...

[carlosbvz]

Before opening, please confirm:

• [X] I have checked to see if my question is addressed in the FAQ.
• [X] I have searched for duplicate or closed issues.
• [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.

App Id

d1t8f7v7uqkz9e

Region

us-east-1

Amplify Console feature

Monorepo, Not applicable

Describe the bug

NextJS - SSR Lambda functions are not working, stopped working today. We get a 503 error:

We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.

We do have our env. vars listed in our next.config.js file:

  env: {
    ${ENV-VAR-NAME}: process.env.{ENV-VAR-NAME},
  },

This is happening with both, old and new branches.

Expected behavior

Nextjs Lambda functions should be up and running as before.

Reproduction steps

Live App is getting 503 back from NextJS lambdas.

Build Settings

No response

Additional information

No response

[carlosbvz]

Hi, Any update on this one? Is it related to the #2540?

[carlosbvz]

Update:

New branches are randomly working (in regards to the lambdas).

Those working are presenting the same behavior after some hours (lambdas are invalid or without permission)

[carlosbvz]

Update #2.

I moved my "nextjs" lambdas to aws lambas (rest API + function) as a mitigation step...

[carlosbvz]

Update #3.

Hi @hloriana , Thanks for looking into this one.

I made a test this morning going back to my NextJs lambdas removing our cache from the amplify.yml file as suggested in https://github.com/aws-amplify/amplify-console/issues/2540 , but got not positive results.

[dqunbp]

Confirm this issue

503 ERROR
The request could not be satisfied.
The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.

Generated by cloudfront (CloudFront)
Request ID: Iy7YUtEH5DR3nYtzF41oDqC8nYUKByx_JBttMxzF4DYajH6GGbdnfQ==

[pnedelko]

Get the same error :(

[carlosbvz]

Hi @hloriana ,

Wondering if you have any idea about this issue?

[PixellUp]

I got the same issue. Turns out that AWS Amplify doesn't support Webpack 5 with is the default and only option in Next JS 12+. That being said either you have to download to Next 11 with next js config webpack5:false flag.

[mawhtin]

Same issue. Pretty big break. Is there an ETA on this fix?

[carlosbvz]

Hi @PixellUp ,

When you said "doesn't support" you mean is not longer supported or never was?

Reason I am asking is because all lambdas were woking before with no issues.

[PixellUp]

It hasn't been supported yet @carlosbvz

Hi @PixellUp ,

When you said "doesn't support" you mean is not longer supported or never was?

Reason I am asking is because all lambdas were woking before with no issues.

[carlosbvz]

Thanks for sharing this info @PixellUp .

I can confirm downgrading to Next11 from Next 12 got my nextJS lambdas working.

[dottodot]

seeing the same, tried AMPLIFY_NEXTJS_EXPERIMENTAL_TRACE=true but this makes no difference on api routes

[victorccccc]

Hi sorry for the inconvenience. Currently, Amplify doesn't support Next 12. If you are seeing 503 error, please try to downgrade to Next 11.

If you are already in Next 11 or lower version, please follow this instruction to attach logs here https://github.com/aws-amplify/amplify-hosting/blob/main/FAQ.md#access-lambda-edge-logs .

Thanks! :-]

[lukaszbanasiak]

Can confirm that issue is with Webpack 5.

Webpack 5 is a default one in the Next 12 and can't be downgraded to 4. Downgrade to 4 is supported in Next 11 by setting webpack5: false, in next.config.js. More info https://nextjs.org/docs/messages/webpack5

Also, be sure to remove Next from "Live Package Updates" in "Build settings" as it will try to bump Next to the latest version during the build process. At least I had this next@latest together with amplify-cli by default.

[davaya]

I've been trying to get the Next.js "blog" demo working. All of the (three) SSR pages were working fine even though I was running Nextjs version 12, but the API lambda was generating the 503 error. The deployment Troubleshooting Guide doesn't include the API lambda; mine looks like

[INFO]: Beginning deployment for application xxxxxxxx
[INFO]: Deploying SSR Resources. Distribution ID: xxxxxxxx
[INFO]: Deployed the following resources to your account:
[INFO]: - CloudFront Domain ID: xxxxxxxx
[INFO]: - SSR Lambda@Edge: xxxxxxxx
[INFO]: - API Lambda@Edge: xxxxxxxx
[INFO]: - Image Optimization Lambda@Edge: xxxxxxxx
[INFO]: - S3 Bucket: xxxxxxxx
[INFO]: Deployment complete

After I downgraded to Nextjs 11, the "blog" SSR pages and "hello" API route are all working correctly by default, without my doing any explicit webpack configuration. Now I can start working on real applications.

nextjs-blog> npm ll
nextjs-blog@
| xxx\next\nextjs-blog
|
+-- [email protected]
|
+-- [email protected]
|
+-- [email protected]
|
+-- [email protected]
|
+-- [email protected]
|
+-- [email protected]
|
`-- [email protected]

Requests:

1. Next cites webpack5 advantages and has been transitioning toward it over the last two major versions. Please support it.
2. Although the AWS Amplify doc clearly says "Amplify supports apps built with the Next.js major versions 9, 10, and 11", newbs like me might not realize that Next is already on version 12 and it won't work. The troubleshooting guide should mention 503 errors and suggest checking Next version and downgrading if necessary.
3. Test API routes (so that the deploy log shows that the API Lambda is being used.

[AlessandroVol23]

I followed all of these workarounds but it is still not working:

• Next 11
• webpack5: false
• Removed package override

Error

503 ERROR
The request could not be satisfied.
The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.

The first thing I am doing when visiting the site is redirecting to an API route to handle auth via Auth0.

[swaminator]

@AlessandroVol23 can you try again.. we just rolled out an update to attempt this bugfix. If this doesn't work for you, happy to hop on a call.

[ntelkedzhiev]

I get the same error. @swaminator still happening... As it is my first time deploying a nextjs app to Amplify, do I have to do anything else to set up the nextjs api routes?

[ivansf]

Having the same issue.

[TxusBlack]

Same issue. But I thing it's about the permissions.

[lisbuenas]

I've checked the logs and seems that were a permission error, related to missed credentials on function. So I've introduced the credentials on api folder and solved the problem.

[fabianberisha]

Same here when redirecting to Auth0

[xiaoxiaosaohuo]

almost half year past, this problem is still not resolved, so sad. do we have plan upgrade Nextjs to 12?

[carlosbvz]

Just to add on this thread:

Amplify seems to work with Next12 (webpack5) just fine when you create a new app. This is a huge problem when you perform a POC, sell the idea to your client, start develop and then (out of the sudden) this stop working...

I agree with @xiaoxiaosaohuo , and this one is a bit serious when you need to refactor your app API or downgrade because of this bug...

For example, I just created this other POC for another client (Nextjs12, webpack5), and here is the lambda working: https://develop.d3eim7c8ijpi48.amplifyapp.com/api/hello but I know I cannot trust this will keep working in the future...

[xiaoxiaosaohuo]

@carlosbvz actually, as a community member, we can not play a role in this, can not see the plan, the timeline, even can not get a clear response from the team, Amplify is a black box for us. I just use the ISR , I set the time as 1 hour, however after 1 hour, some pages can not be accessed, I downgrade to 11, it's still not working. then I use the SSR instead.

[PSoltes]

This is huge no no, how the hell nextjs12 is not supported?

[mawhtin]

Just to add on this thread:

Amplify seems to work with Next12 (webpack5) just fine when you create a new app. This is a huge problem when you perform a POC, sell the idea to your client, start develop and then (out of the sudden) this stop working...

I agree with @xiaoxiaosaohuo , and this one is a bit serious when you need to refactor your app API or downgrade because of this bug...

For example, I just created this other POC for another client (Nextjs12, webpack5), and here is the lambda working: https://develop.d3eim7c8ijpi48.amplifyapp.com/api/hello but I know I cannot trust this will keep working in the future...

Great! Are you using 12.1.6?

[carlosbvz]

Hi @mawhtin ,

Yes, BUT, this works more like a bug than a feature.

I just wanted to point out that even though Next 12 works with Amplify (which will suggest it is supported) and it will work just fine for even months, it will eventually break at some point...

One morning you are going to wake up, and your NextJS Lambdas are not going to work any longer...

[martinIvovIv]

Can confirm that issue is with Webpack 5.

Webpack 5 is a default one in the Next 12 and can't be downgraded to 4. Downgrade to 4 is supported in Next 11 by setting webpack5: false, in next.config.js. More info https://nextjs.org/docs/messages/webpack5

Also, be sure to remove Next from "Live Package Updates" in "Build settings" as it will try to bump Next to the latest version during the build process. At least I had this next@latest together with amplify-cli by default.

Do you remove the NextJS version as a whole ? I tried downgrading to 11.1.2 but I'm going to try removing it. I've tried everything, no idea why I'm still getting 503, I'm mocking the backend response :>