503 error on invoking an API endpoint #1776

randalpinto · 2021-10-01T11:13:49Z

Issue Summary

Getting a 503 error when invoking API endpoint

Actual behavior

503 error returned

Expected behavior

200 OK returned

Steps to reproduce

Created the simplest API to test:

import type { NextApiResponse, NextApiRequest } from 'next';
  export default (req: NextApiRequest, res: NextApiResponse): void => {
  res.status(200).json({ test: 'Success' });
};

also simplest serverless.yml:

# serverless.yml
redsiftWebsite:
  component: '@sls-next/serverless-component@3.3.0'
  inputs:
    memory: 1024

Screenshots/Code/Configuration/Logs

Curl response:

$ curl https://<our url>/api/test

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML><HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>ERROR: The request could not be satisfied</TITLE>
</HEAD><BODY>
<H1>503 ERROR</H1>
<H2>The request could not be satisfied.</H2>
<HR noshade size="1px">
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.
<BR clear="all">
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
<BR clear="all">
<HR noshade size="1px">
<PRE>
Generated by cloudfront (CloudFront)
Request ID: kXiMppFOvw_x8QS6xV0ymdrtCCHsARSrUJyjDjZyryNRDJamjyKDww==
</PRE>
<ADDRESS>
</ADDRESS>
</BODY></HTML>

Lambda error log:

{
    "errorType": "SyntaxError",
    "errorMessage": "Invalid left-hand side in assignment",
    "stack": [
        "/var/task/chunks/602.js:429285",
        "            true = JSON.stringify(true);",
        "            ^^^^",
        "",
        "SyntaxError: Invalid left-hand side in assignment",
        "    at wrapSafe (internal/modules/cjs/loader.js:988:16)",
        "    at Module._compile (internal/modules/cjs/loader.js:1036:27)",
        "    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)",
        "    at Module.load (internal/modules/cjs/loader.js:937:32)",
        "    at Function.Module._load (internal/modules/cjs/loader.js:778:12)",
        "    at Module.require (internal/modules/cjs/loader.js:961:19)",
        "    at require (internal/modules/cjs/helpers.js:92:18)",
        "    at Object.__webpack_require__.f.require (/var/task/pages/api/test.js:495:28)",
        "    at /var/task/pages/api/test.js:418:40",
        "    at Array.reduce (<anonymous>)"
    ]
}

Versions

@sls-next/serverless-component@3.3.0
Next.js 11.1.2

Additional context

N/A

Checklist

You have reviewed the README and FAQs, which answers several common questions.
You have reviewed our DEBUGGING wiki and have tried your best to include complete information and reproduction steps (including your configuration) as is possible.
You have first tried 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.

The text was updated successfully, but these errors were encountered:

dphang · 2021-10-02T06:55:21Z

Hm, I think it's Next.js inlining not preventing assignment properly (usually inlining process.env etc.). This component doesn't touch the chunks generated by Next.js, can you try to build locally and see if there is the same issue in your Next.js chunks as well? If so, you'll have to check /var/task/chunks/602.js:429285 and see what's the offending code, is it your code?

randalpinto · 2021-10-03T14:28:02Z

Seems to be related to packaged up NextJS code, the following code:

https://github.com/vercel/next.js/blob/4f212ee91d0af4355cef62362d08427bb2bca969/packages/next/server/next-server.ts#L292

is being packaged into this inside the chunk:

* This sets environment variable to be used at the time of SSR by head.tsx.
     * Using this from process.env allows targeting both serverless and SSR by calling
     * `process.env.__NEXT_OPTIMIZE_IMAGES`.
     * TODO(atcastle@): Remove this when experimental.optimizeImages are being cleaned up.
     */ if (this.renderOpts.optimizeFonts) {
            false = JSON.stringify(true);
        }
        if (this.renderOpts.optimizeImages) {
            false = JSON.stringify(true);
        }
        if (this.renderOpts.optimizeCss) {
            false = JSON.stringify(true);
        }
    }

and then the false = JSON.stringify(true); triggers the exception in the Lambda. Any ideas?

randalpinto · 2021-10-04T06:16:50Z

@dphang symptom is very similar to #846

dphang · 2021-10-04T07:49:37Z

Hm, I think it's a problem in webpack when next.js is built for serverless target, unfortunately. Maybe you might try something like here to redefine the DefinePlugin config: debug-js/debug#467 (comment)

randalpinto · 2021-10-04T09:08:49Z

Will give it a go and report back. In the meantime I've also opened a bug in NextJS: vercel/next.js#29582

moimikey · 2021-10-04T14:33:47Z

i had similar, and it had to do with version conflict between next, webpack and typescript. what version of typescript and webpack are being used?

randalpinto · 2021-10-04T14:44:13Z

@moimikey these are the versions i am using:

"typescript": "4.4.3",
"webpack": "5.56.0",
"next": "11.1.2",

randalpinto · 2021-10-05T06:58:00Z

@dphang Vercel maintainer suggests it is how serverless-next is handling the next-server bundling:

Hi, this sounds like a bug in how the bundling in serverless-next is being handled as next-server shouldn't be processed with webpack which it sounds like it is since the process.env value is being replaced probably via DefinePlugin which shouldn't be run on next-server.

Is this the case?

dphang · 2021-10-05T07:08:51Z

No, we are not bundling anything with webpack, only with Rollup.js but that's only this component's code (and it's pre-bundled). Basically all the page JS and chunks JS is just copied along with the pre-bundled handler code (which will dynamically require the Next.js page JS). So I think it should still be an issue in Next.js. Maybe just confirm the issue happens with just next build just in case this component is somehow affecting it (but I don't think it would?)

randalpinto · 2021-10-05T07:14:23Z

Issue does not happen with next build

dphang · 2021-10-05T07:50:17Z

Ok, can you please share a minimal repro repository, I wasn't able to see any issue in chunks JS when I tried to repro (used same versions as you in the e2e test next-app). Weird because this component doesn't directly bundle anything with webpack.

randalpinto · 2021-10-06T22:54:55Z

@dphang after a tortuous path I finally found the culprit. We use Sentry and deep in their docs it says that the webpack configuration is not compatible with serverless environments: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/. Closing this issue.

randalpinto closed this as completed Oct 6, 2021

james-wallis mentioned this issue Apr 12, 2022

Add Sentry Monitoring (and break API routes) skylark-platform/reference-apps#5

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

503 error on invoking an API endpoint #1776

503 error on invoking an API endpoint #1776

randalpinto commented Oct 1, 2021

dphang commented Oct 2, 2021

randalpinto commented Oct 3, 2021

randalpinto commented Oct 4, 2021

dphang commented Oct 4, 2021

randalpinto commented Oct 4, 2021

moimikey commented Oct 4, 2021

randalpinto commented Oct 4, 2021

randalpinto commented Oct 5, 2021

dphang commented Oct 5, 2021

randalpinto commented Oct 5, 2021

dphang commented Oct 5, 2021 •

edited

randalpinto commented Oct 6, 2021

503 error on invoking an API endpoint #1776

503 error on invoking an API endpoint #1776

Comments

randalpinto commented Oct 1, 2021

Issue Summary

Actual behavior

Expected behavior

Steps to reproduce

Screenshots/Code/Configuration/Logs

Versions

Additional context

Checklist

dphang commented Oct 2, 2021

randalpinto commented Oct 3, 2021

randalpinto commented Oct 4, 2021

dphang commented Oct 4, 2021

randalpinto commented Oct 4, 2021

moimikey commented Oct 4, 2021

randalpinto commented Oct 4, 2021

randalpinto commented Oct 5, 2021

dphang commented Oct 5, 2021

randalpinto commented Oct 5, 2021

dphang commented Oct 5, 2021 • edited

randalpinto commented Oct 6, 2021

dphang commented Oct 5, 2021 •

edited