Preview mode broken in Next v10.0.2+ for target: "serverless": TypeError: e[t] is not a function #20575

FinnWoelm · 2020-12-29T15:34:25Z

Bug report

Describe the bug

Given any API route with setPreviewData(), such as the following,

// pages/api/preview.js
export default async function preview(req, res) {
  res.setPreviewData({});
  res.json({ success: true });
}

that is built with target: "serverless" using Next v10.0.2 or later, will cause the following Node error when executing the page's function default():

TypeError: e[t] is not a function
    at __webpack_require__ (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:30130)
    at Object.293 (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:29747)
    at __webpack_require__ (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:30130)
    at Object.118 (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:28826)
    at __webpack_require__ (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:30130)
    at Object.692 (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:17036)
    at __webpack_require__ (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:30130)
    at Object.28 (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:15901)
    at __webpack_require__ (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:30130)
    at Object.27 (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:3078)
TypeError: e[t] is not a function
    at __webpack_require__ (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:30130)
    at Object.293 (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:29747)
    at __webpack_require__ (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:30130)
    at Object.118 (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:28826)
    at __webpack_require__ (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:30130)
    at Object.692 (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:17036)
    at __webpack_require__ (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:30130)
    at Object.28 (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:15901)
    at __webpack_require__ (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:30130)
    at Object.27 (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:3078)
(node:32970) UnhandledPromiseRejectionWarning: TypeError: e[t] is not a function
    at __webpack_require__ (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:30130)
    at Object.293 (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:29747)
    at __webpack_require__ (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:30130)
    at Object.118 (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:28826)
    at __webpack_require__ (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:30130)
    at Object.692 (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:17036)
    at __webpack_require__ (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:30130)
    at Object.28 (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:15901)
    at __webpack_require__ (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:30130)
    at Object.27 (/home/user/next-serverless-preview-mode/.next/serverless/pages/api/preview.js:9782:3078)

The error occurs in the compiled API route, during setPreviewData, when the page attempts to __webpack_require__ jsonwebtoken:

Specifically, the error occurs when jsonwebtoken tries to require Buffer (NkYg):

This is because the code tries to load Buffer with __webpack_require__, which is a function that is redefined/overwritten by the jsonwebtoken code:

The root of this issue goes back to vercel/ncc. The compiled code for jsonwebtoken redefines __webpack_require__, which takes priority over the __webpack_require__ defined at the page-level where Buffer/NkYg is defined. A similar issue has been reported here: vercel/ncc#589

This issue seems to have been introduced in vercel/ncc v0.24, which was introduced to next in v10.0.2 (#18873). In Next v10.0.1 and before, the jsonwebtoken code does not define __webpack_require__ in a way that overwrites the function at the page-level.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Clone https://github.com/FinnWoelm/next-serverless-preview-mode
Install dependencies with npm install
Build the app with npm run build (or next build)
Run node request.js, which simulates a HTTP request and calls the API route's default() function
See error in console
Downgrade to Next v10.0.1: npm install next@10.0.1
Rebuild the app with npm run build and re-run node request.js
See no error in console and see message {success:"true"} in console.

Expected behavior

Running setPreviewData() in an API route should not cause a fatal error. Preview mode is currently not usable in Next v10.0.2 with target: "serverless".

Screenshots

See screenshots included in description above.

System information

OS: Ubuntu 20.04
Browser (if applies): Not applicable
Version of Next.js: v10.0.2 and later
Version of Node.js: tested with v12 and v14
Deployment: any platform

Additional context

It is much easier to trace the code and error when looking at a prettified version of the compiled API route and when looking at the prettified versions of the compiled jsonwebtoken code. I've included these in the prettified folder: https://github.com/FinnWoelm/next-serverless-preview-mode/tree/main/prettified

Prettified, compiled API route
- setPreviewData: L5876
- requiring jsonwebtoken: L5899
- requiring Buffer: L15472
- overwriting of __webpack_require__: L15492
Prettified, compiled jsonwebtoken as of Next v10.0.1
Prettified, compiled jsonwebtoken as of Next v10.0.2

Possible workarounds:

Using target: "experimental-serverless-trace"
Downgrading to Next v10.0.1
Using patch-package to replace the two instances of next/dist/compiled/jsonwebtoken with jsonwebtoken in https://github.com/vercel/next.js/blob/master/packages/next/next-server/server/api-utils.ts (patch here) and installing jsonwebtoken as a dependency with npm install jsonwebtoken@3.5.1.

Possible fix: Do not use vercel/ncc to precompile jsonwebtoken until this issue (vercel/ncc#589) is fixed in vercel/ncc. This would follow the same approach that was taken with node-fetch, etag, chalk, and raw-body, which were all "un-ncc-ed" when vercel/ncc was upgraded to v0.25 in #18873.

PS: Huge fan of your work ♥️ Let me know if I can provide any more information.

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

When compiling the code for jsonwebtoken with ncc, the compiled code defines __webpack_require_. This function conflicts with the same-named function at Next.js page-level and thus causes an unintentional fatal error when using jsonwebtoken in a Next.js app that has been built with target: "serverless". For example, in an API route that uses `setPreviewData` (which uses jsonwebtoken). Fixes vercel#20575.

FinnWoelm · 2020-12-29T16:30:39Z

I just created a PR that "un-ncc"s jsonwebtoken, in case it's helpful: #20577 😊

Tested it locally (with next: file:../next.js/packages/next) and it works great 😊

guybedford · 2020-12-30T01:22:47Z

Thanks for the very clear replication info here @FinnWoelm. Finally managed to track this one down with a fix in vercel/ncc#633. As soon the ncc update is released we can reflect that build here which in my testing resolves the issue in your replication.

rdsedmundo · 2021-01-29T21:35:20Z

Also facing this, very frustrating because the error is not intuitive at all in pointing out what's wrong.

FinnWoelm · 2021-02-02T19:24:23Z

Hi @rdsedmundo, I've heard (through the grapevines from @lindsaylevine) that this is fixed in Next v10.0.6, which was released four days ago. Are you perhaps still on v10.0.5 or earlier?

ijjk · 2021-04-20T13:10:32Z

Per above comment it looks like this was fixed after ncc was updated so going to close this, if you're still encountering problems with this please reply with additional information and we can investigate further!

balazsorban44 · 2022-01-28T11:05:57Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

FinnWoelm added the bug Issue was opened via the bug report template. label Dec 29, 2020

This was referenced Dec 29, 2020

Latest 0.24 compiled npm package cause issue in app built with webpack vercel/ncc#589

Closed

Preview mode broken in Next 10.0.2 with target: "serverless": TypeError: e[t] is not a function netlify/next-on-netlify#99

Closed

Timer added kind: bug and removed bug Issue was opened via the bug report template. labels Dec 29, 2020

Timer modified the milestone: 10.x.x Dec 29, 2020

FinnWoelm mentioned this issue Dec 29, 2020

Fix preview mode when using target: "serverless": Do not ncc jsonwebtoken #20577

Closed

Timer modified the milestones: 10.x.x, backlog Jan 6, 2021

ijjk closed this as completed Apr 20, 2021

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Preview mode broken in Next v10.0.2+ for target: "serverless": TypeError: e[t] is not a function #20575

Preview mode broken in Next v10.0.2+ for target: "serverless": TypeError: e[t] is not a function #20575

FinnWoelm commented Dec 29, 2020 •

edited

Loading

FinnWoelm commented Dec 29, 2020

guybedford commented Dec 30, 2020

rdsedmundo commented Jan 29, 2021

FinnWoelm commented Feb 2, 2021

ijjk commented Apr 20, 2021

balazsorban44 commented Jan 28, 2022

Preview mode broken in Next v10.0.2+ for target: "serverless": TypeError: e[t] is not a function #20575

Preview mode broken in Next v10.0.2+ for target: "serverless": TypeError: e[t] is not a function #20575

Comments

FinnWoelm commented Dec 29, 2020 • edited Loading

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Additional context

FinnWoelm commented Dec 29, 2020

guybedford commented Dec 30, 2020

rdsedmundo commented Jan 29, 2021

FinnWoelm commented Feb 2, 2021

ijjk commented Apr 20, 2021

balazsorban44 commented Jan 28, 2022

FinnWoelm commented Dec 29, 2020 •

edited

Loading