503 ERROR - The Lambda function associated with the CloudFront distribution is invalid. Environment variable support for Labda@Edge

[IbrahimSam96]

Provide additional details
I connected a SSR Next.js app repo, where amplify detected SSR pages and created SSR resources ( CloudFront, Default Edge Lambda, S3 bucket, API Edge Lambda, Image Optimization Edge Lambda ). The error I'm receiving s because Lambda@Edge doesn't support environment variables.
What AWS Services are you utilizing?
Amplify Console
Provide additional details e.g. code snippets
SSR Resources

CloudWatch Log

[github-actions]

Hi 👋, thanks for opening! While we look into this...

If this issue is related to custom domains, be sure to check the custom domains troubleshooting guide to see if that helps. Also, there is a more general troubleshooting FAQ that may be helpful for other questions.

Lastly, please make sure you've specified the App ID and Region in the issue!

[RealDrewKlayman]

Environment variables have been added. Check to make sure you are adding them as described here:
#1987 (comment)

[IbrahimSam96]

Environment variables have been added. Check to make sure you are adding them as described here:
#1987 (comment)

I did update my next.config.js file and the amplify terminal fails at build and gives me this error -

[WARNING]: (node:1239) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API

[IbrahimSam96]

I'm also using Firebase Admin which works only on Server Side.

[RealDrewKlayman]

I don't think that has anything to do with Environment Variables not working...
Could be related to this: vercel/next.js#15576

[IbrahimSam96]

I navigated the discussions and still unsure about the solution is!

package.JSON

{
  "name": "graphx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "moment": "^2.29.1",
    "next": "^11.0.1",
    "nookies": "^2.5.2",
    "react": "^17.0.2",
    "react-bootstrap": "^1.5.2",
    "react-dom": "^17.0.2",
  }
}
```

next.config.js 

```
module.exports = {
    env: {
        PRIVATE_KEY: process.env.PRIVATE_KEY,
        CLIENT_EMAIL: process.env.CLIENT_EMAIL,
        PROJECT_ID: process.env.PROJECT_ID,
        NEXT_PUBLIC_GA_ID: process.env.NEXT_PUBLIC_GA_ID
    }
  };
```
  

[RealDrewKlayman]

It seems like you are in the same boat as us.
The Module Not Found is not working correctly.

This is related with #2098.

@IbrahimSam96

[bojidaryovchev]

yo guys, I think I found a solution. For me, the approach with next.config.js did not work, so after trying various things I saw AWS User Guide # Access Environment Variables and managed to get it working.

1. I went to my Amplify app Build Settings
2. I edited the App build specification amplify.yml file
3. For every Environment Variable I had added in the Amplify app Environment Variables section, I added
   - echo "SOME_VARIABLE=$SOME_VARIABLE" >> .env
4. That's it, after that I redeployed the build and I had all my variables present

[Jay2113]

This issue is a duplicate of #2098 and it seems isolated to Next v11. We have since launched improved support for Next.js versions 12 and 13 so this should no longer be an issue.

[github-actions]

This issue is now closed. Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.

[github-actions]

This issue has been automatically locked.