503 error on pages that user getServerSideProps, Lambda@edge error Cannot find module '../../chunks/188.5cfa7090ba8f9961a3f8.js'

Describe the bug

I get the following on a page that uses getServerSideProps:

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.

Actual behavior

I have a page that uses getServerSideProps (works locally fine, but not when deployed), when I navigate to that page through a click, it works fine (mostly, sometimes I also get a 503). When I open in new tab by right clicking, I always get a 503.

Expected behavior

Page loads with server’s data.

Steps to reproduce

Just using getServerSideProps to build the page and then deploying it.

Screenshots/Code/Logs

serverless.yml:

  component: "@sls-next/serverless-component@1.19.0-alpha.42"

My Lambda@edge logs example:

2021-04-08T05:23:32.733Z	9cda5568-45bc-45ed-9a98-53f0681872da	ERROR	Error: Cannot find module '../../chunks/188.5cfa7090ba8f9961a3f8.js'
Require stack:
- /var/task/pages/listings/[urlAddress].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/listings/[urlAddress].js:263109:28)
    at /var/task/pages/listings/[urlAddress].js:263037:40
    at Array.reduce (<anonymous>)
    at Function.__webpack_require__.e (/var/task/pages/listings/[urlAddress].js:263036:67)
    at __webpack_modules__.11522.Layout.loadableGenerated.webpack (/var/task/pages/listings/[urlAddress].js:225066:96)
    at LoadableSubscription.load [as _loadFn] (/var/task/pages/listings/[urlAddress].js:221459:17) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/var/task/pages/listings/[urlAddress].js',
    '/var/task/index.js',
    '/var/runtime/UserFunction.js',
    '/var/runtime/index.js'
  ]
}

Versions

• OS/Environment: Big Sur
• @sls-next/serverless-component version: 1.19.0-alpha.42
• Next.js version: 10.0.6

Additional context

Checklist

• [- ] You have reviewed the README and FAQs, which answers several common questions.
• [- ] Please first try using the most recent latest or alpha @sls-next/serverless-component release version, which may have already fixed your issue or implemented the feature you are trying to use. Note that the old serverless-next.js component and the serverless-next.js plugin are deprecated and no longer maintained.

[dphang]

Should be fixed by https://github.com/serverless-nextjs/serverless-next.js/pull/1095

[dphang]

Strange, I did not see these chunks, maybe it is a new thing in later Next.js versions. I had just upgraded the e2e test versions (they were on 10.0.2 mostly) and came across this problem as well.

It looks like we’ll need to copy the contents of chunks as well. Let me reopen this issue and make a fix soon.

In the future in case of similar issues, you can always use postBuildCommands to manually copy needed files to unblock yourself. (although of course this component should do that for you)