https://serverless-stack.com/ logo
Join Slack
Powered by
Hey I am deploying a NextJS SSR site to AWS using ...
# help
h
Hey I am deploying a NextJS SSR site to AWS using the SST stack. Everything went successfully but when I try to hit a route on the site it gives me the attached error page. I thought it was missing permissions so I've added the following for the lambda
Copy code
defaults: {
      function: {
        timeout: process.env.AWS_LAMBDA_EDGE_TIMEOUT,
        memorySize: process.env.AWS_LAMBDA_EDGE_MEMORY_SIZE,
        permissions: ['*'],
      },
    },
and this for the site, not sure if I needed both
Copy code
site.attachPermissions('*');
I'm still getting the same error. Is there something else I'm missing to get the routing to work? I am using following package versions
Copy code
"@serverless-stack/cli": "^1.0.2",
    "@serverless-stack/resources": "^1.0.2",
    "@sls-next/lambda-at-edge": "^3.7.0",
Copy code
"@serverless-stack/static-site-env": "^1.0.2",
Something that could be related is I'm noticing that the Lambda functions created are not being set based on the runtime I'm choosing in my stack I have the following
Copy code
import { Stack } from './stack';
import { App } from '@serverless-stack/resources';

export default function main(app: App) {
  // Set default runtime for all functions
  app.setDefaultFunctionProps({
    runtime: 'nodejs14.x',
  });

  app.stack(Stack, { id: 'stack-name' });

  // Add more stacks
}
And when I check AWS I can see that the node versions is 12
f
Hey @Hartley Jean-Aimee, the NextjsSite construct is a bit special in the way that the Lambda functions are Lambda@Edge functions auto-generated by the 
"@sls-next/lambda-at-edge"
package. So they are left as in.
That said, if you head over to the AWS CloudWatch console, and switch to the region physically close to u, you should see the log for the Lambda@Edge functions.
The log should contain more details about the 503 error.
h
Hey @Frank. Thanks I did this and found the log. It seems to complain at the use of 
??
nullish coalescing operator in the project which must be due to the Node version that the function is using 12 as oppose to 14. Which leads me to the last comment I made as to why it's not using the runtime I've set. I can see the functions created are using 12.
But I have do 
nodejs14.x
set
f
@Hartley Jean-Aimee I see. Lemme take a look.
h
Hey @Frank were you able to find anything?
I've tried various things but it still doesn't seem to set all of the Lambda functions to the runtime I'm passing in the
Copy code
app.setDefaultFunctionProps({ runtime: 'nodejs14.x' })
I can see in the cloudformation template all of the functions are either 
nodejs12.x
or 
python
besides the 
LogRetentionXXXX
function which is using 
nodejs14.x
. Below is my main 
stack/index.ts
file
Copy code
import { Stack } from './stack';
import { App } from '@serverless-stack/resources';

export default function main(app: App) {
  // Set default runtime for all functions
  app.setDefaultFunctionProps({
    runtime: 'nodejs14.x',
  });

  app.stack(Stack, { id: 'test-stack' });

  // Add more stacks
}
I can't see what I'm doing wrong. I also saw in the documentation that 
nodejs14.x
was set by default but maybe this isn't the case for the 
NextJsSite
construct.
So my the reason I'm getting the 503 when trying to access the dynamic route is for the following:
Copy code
{
  "errorType": "SyntaxError",
  "errorMessage": "Unexpected token '?'",
  "stack": [
    "/var/task/pages/[companyId]/[formId].js:2079",
    "        width: props.menuWidth ?? '100%',",
    "                                ^",
    "",
    "SyntaxError: Unexpected token '?'",
    "    at wrapSafe (internal/modules/cjs/loader.js:915:16)",
    "    at Module._compile (internal/modules/cjs/loader.js:963:27)",
    "    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)",
    "    at Module.load (internal/modules/cjs/loader.js:863:32)",
    "    at Function.Module._load (internal/modules/cjs/loader.js:708:14)",
    "    at Module.require (internal/modules/cjs/loader.js:887:19)",
    "    at require (internal/modules/cjs/helpers.js:74:18)",
    "    at getPage (/var/task/default-handler-0a0dc009.js:103062:22)",
    "    at renderRoute (/var/task/default-handler-0a0dc009.js:1855:18)",
    "    at handleDefault (/var/task/default-handler-0a0dc009.js:1892:16)"
  ]
}
I figured being on 
Nodejs14.x
would solve this but I'm having issues getting that to work with SST. Any suggestions would be appreciated as I'm a bit stuck on this? Thanks
@Frank Any suggestions here? Also I did look to update my function to the following
Copy code
app.setDefaultFunctionProps({
    runtime: 'nodejs14.x',
    srcPath: 'web',
    bundle: {
      format: 'esm',
    },
  });
Using 
nodejs16
solved my issue it seems so thanks for releasing that @Frank 🙏
f
Hey @Hartley Jean-Aimee sorry about the delay in the response. Glad it working!
13 Views
Open in Slack
PreviousNext
Powered by