API routes return CloudFront 503 on next 12.0.9

[thiskevinwang]

(I think this is a feature request, more than a bug 🤔)

Is your feature request related to a problem? Please describe.

When upgrading next from 12.0.8 to 12.0.9, API routes started to return a generic 503 from CloudFront.

• Update: I'm seeing the same error message that @jakubriedl posted ¹

TypeError: Cannot read property 'headers' of undefined
    at Object.apiResolver (/var/task/chunks/89.js:10564:43)
    at Module.<anonymous> (/var/task/chunks/89.js:6094:34)

A barebones API route (/api/health.ts) would return a generic 503 CloudFront error

import { NextApiHandler } from "next";

const handler: NextApiHandler = async (req, res) => {
  return res.status(200).send("OK");
};

export default handler;

Describe the solution you'd like

For these to just work with next >= 12.0.9 🙏

    "@sls-next/cdk-construct": "3.7.0-alpha.7",
    "@sls-next/lambda-at-edge": "3.7.0-alpha.7",

Describe alternatives you've considered

Pin next to 12.0.8

Additional context

vercel/next.js@v12.0.8...v12.0.9

Footnotes

1. https://github.com/serverless-nextjs/serverless-next.js/issues/2327#issuecomment-1026500341 ↩

[jakubriedl]

We are having same issue just with different error code.
The error Cannot read headers of undefined is coming from apiResolver function which is inside next. It seems there are changes with next-serverless-loader and this file api-utils with works related to refactoring of BaseServer in 12.0.9.
Version 12.0.8 is working fine for us.

the error as we see it in cloudwatch

TypeError: Cannot read property 'headers' of undefined
    at Object.apiResolver (/var/task/chunks/89.js:10564:43)
    at Module.<anonymous> (/var/task/chunks/89.js:6094:34)

[Purii]

Same for us. It breaks from 12.0.8 to 12.0.9

[thiskevinwang]

@jakubriedl @Purii I just confirmed 12.0.8 still works for me as well and updated the issue title :)

[emulienfou]

I can also confirm working with version 12.0.8 however not working with both 12.0.9 and 12.0.10 versions.

[zhenjie]

Confirmed 12.0.8 works fine, and 12.0.9 does not work.

[torresandres]

I had the same issue but with 12.0.4 and updating to 12.0.8 fixed it for me.

[NickGonzalez04]

Got the same Issue and I switched to 12.0.8. Is there other suggestions to resolving the apiResolver?

Same error referenced above:

"TypeError: Cannot read property 'headers' of undefined", " at Object.apiResolver (/var/task/chunks/458.js:2435:43)", " at Module.<anonymous> (/var/task/chunks/458.js:49:34)

[fgiopp]

I also have the same error. Any news? Nextjs 12.0.10

[traianturcu]

I still encounter the error in 12.1.0 as well.

[jakubriedl]

@dphang is there something how we can help with fixing this one? Is the PR raised by @KensukeTakahara good or does it need some improvements?

[dphang]

@jakubriedl thanks, I had gotten busy and had less time the past weeks so have just merged these changes. Will publish a new version soon.

[iKoru]

Thanks for useful information. I've looked around this for a couple of weeks.

[KensukeTakahara]

This issue has been resolved in v3.7.0-alpha.9.
Thanks @dphang for publishing new version.

[jokinol]

I can confirm that https://github.com/serverless-nextjs/serverless-next.js/releases/tag/v3.7.0-alpha.9 works with Next.js 12.1.0

However, if you have useV2Handler: true set in serverless.yml it will throw same (kind) 503 error:

"stack": [
            "TypeError: Cannot read property 'headers' of undefined",
            "    at Object.apiResolver (/var/task/node_modules/next/dist/server/api-utils/node.js:125:55)",
            "    at Module.<anonymous> (/var/task/chunks/3884.js:42:30)"
        ]

useV2Handler is required in our case, because otherwise root rewrites will throw 404 (#1823).

I tried to find if there would be an easy fix to support this also in v2 handler, but couldn't find correct place to do copypasta.

[traianturcu]

I apologize if this is not the right place to ask this question, but do you happen to know if AWS Amplify uses serverless-nextjs for deploying Next.js apps? When using Amplify to deploy our app I encounter the same issue (unless I switch to Next 12.0.8)

[jokinol]

@traianturcu I'm not sure, but not necessary. If I understood correctly, next.js just broke one internal API without any notice. I guess they don't care that much about the 3rd party deployments so they can do these kind of changes silently and keep Vercel updated.

[jakubriedl]

Unfortunately we're still seeing the same behaviour with @sls-next/[email protected] and @sls-next/[email protected]. Not sure if it has something to do with V2 handler, we don't specify useV2Handler in the config, but it seems to be using it by default.

In our stack we do our own provisioning using CDK and use this library only to build the js files that are pushed to lambda. The code to build it follows

import { CoreBuildOptions } from "@sls-next/core"
import { LambdaBuilder } from "@sls-next/lambda"

const cmd = join(require.resolve("next"), "../../bin/next")
const outputDir = ".lambda"

const options: CoreBuildOptions = {
  cmd,
  outputDir,
}

const builder = new LambdaBuilder({}, options)

builder.build(true).then(() => {
  // some of our custom stuff
})

[mattbbc]

I'm also getting this issue with [email protected] and @sls-next/[email protected]. Unfortunately I'm also unable to retrieve the logs for the default Lambda for some reason (they stopped in September 2021 and I haven't been able to determine why yet).

[KensukeTakahara]

I raised a PR #2381 for this issue when useV2Handler is set.
Please review @dphang .

[KensukeTakahara]

The problem with useV2Handler has been resolved in v3.7.0-alpha.10.

[jakubriedl]

It works now for us as well, thanks a lot everyone

[jokinol]

I can confirm that it works with next.js 12.1.0.

Unfortunately rewrites to api routes doesn't work with this. I'm not sure if it is related to changes made in this MR. But e.g.

{ source: '/sitemap.xml', destination: '/api/sitemap' },

gives 404 if you try to access /sitemap.xml. But /api/sitemap URL works fine.

[KensukeTakahara]

@jokinol
I don't think this issue title API routes return CloudFront 503 on next 12.0.9 and rewrites are related.
It would be better to open it as a separate issue.

[jokinol]

@KensukeTakahara Probably not, but I can confirm that API rewrites works with "@sls-next/serverless-component": "3.6.0" and "next.js": "12.0.8" but returns 404 on "@sls-next/serverless-component": "v3.7.0-alpha.10" and "next.js": "12.0.8". Notice: useV2Handler: true should be set in serverless.yml

So either this or something that was merged before broke this functionality.

[KensukeTakahara]

@jokinol
My PR of this issue is merged in v3.7.0-alpha.9 & v3.7.0-alpha.10.
If I broke API rewrites with useV2Handler, v3.7.0-alpha.8 will function normally.
Please use v3.7.0-alpha.8 to check.

[jokinol]

Ok, so i tested this and looks like rewrites are broken also in v3.7.0-alpha.8. I think I will debug a bit more and post a new issue.

[jokinol]

Sorry about confusion, but seems that it also works with v3.7.0-alpha.10 and useV2Handler: true. I had some rebase/merge error there and I was missing useV2Handler rule from serverless.yml.

[Knufle]

Hi everybody, I was having the 503 error today after setting up a pretty standard nextjs project using serverless-next.js 3.6.0, I thought it was a Lambda permission issue so I created a new role/policy but the error persisted, I'm using next 12.1.0 btw. Reading through the comments I saw some people mention the alpha pre-release so I tested 3.7.0-alpha.10 and boom, the default api that comes in the example project (api/hello) started working! I even removed the policy/role that I created and everything is still working just fine, I hope this helps someone too.

[coltenkrauter]

Yup, I also had this issue.

Upgrading to [email protected] and @3.7.0-alpha.11 fixed everything for me. My /api routes no longer return 503.

[rnrnstar2]

I also have this problem.
I'm hosting with pressing, is there a way to change it to @ 3.7.0-alpha.11.

[spencermehta]

Yup, I also had this issue.

Upgrading to [email protected] and @3.7.0-alpha.11 fixed everything for me. My /api routes no longer return 503.

Does alpha.11 also fix for the CDK construct or just the serverless framework one?

[thiskevinwang]

I just upgraded to the following, and confirmed that API routes are working fine 🚀

    "next": "12.1.6",

    "@sls-next/cdk-construct": "3.7.0",
    "@sls-next/lambda-at-edge": "3.7.0",

Thanks a ton @KensukeTakahara & @dphang ❤️.

---

Resolved by #2344