Skip to content
This repository was archived by the owner on May 10, 2021. It is now read-only.

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

Closed
fverloop opened this issue Nov 23, 2020 · 12 comments
Closed

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

fverloop opened this issue Nov 23, 2020 · 12 comments
Labels
experimental-serverless-trace Next 10 priority: high

Comments

@fverloop
Copy link

fverloop commented Nov 23, 2020 •
edited
Loading

Since we've switched to the latest version of next (10.0.2), preview mode has been broken. Everything builds successfully, but when we load our /api/preview endpoint we get the following error:

[request] /api/preview/
TypeError: e[t] is not a function
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.293 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:29747)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.118 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:28826)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.692 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:17036)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.28 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:15901)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.27 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:3078)
TypeError: e[t] is not a function
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.293 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:29747)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.118 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:28826)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.692 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:17036)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.28 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:15901)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.27 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:3078)
TypeError: e[t] is not a function
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.293 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:29747)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.118 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:28826)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.692 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:17036)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.28 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:15901)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.27 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:3078)
TypeError: e[t] is not a function
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.293 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:29747)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.118 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:28826)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.692 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:17036)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.28 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:15901)
    at __webpack_require__ (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:30130)
    at Object.27 (/Users/florisverloop/Projects/site-sass/site/out_functions/next_api_preview/nextPage.js:43666:3078)

/usr/local/lib/node_modules/netlify-cli/node_modules/netlify-redirector/lib/redirects.js:116
      throw ex;
      ^
abort({}) at Error
    at jsStackTrace (/usr/local/lib/node_modules/netlify-cli/node_modules/netlify-redirector/lib/redirects.js:1070:13)
    at stackTrace (/usr/local/lib/node_modules/netlify-cli/node_modules/netlify-redirector/lib/redirects.js:1087:12)
    at process.abort (/usr/local/lib/node_modules/netlify-cli/node_modules/netlify-redirector/lib/redirects.js:8502:44)
    at process.emit (events.js:310:20)
    at processPromiseRejections (internal/process/promises.js:209:33)
    at processTicksAndRejections (internal/process/task_queues.js:98:32)
(Use `node --trace-uncaught ...` to show where the exception was thrown)
@fverloop fverloop changed the title Previewing broken in Next canary Previewing broken in Next 10.0.2 Nov 23, 2020
@fverloop fverloop changed the title Previewing broken in Next 10.0.2 Preview mode broken in Next 10.0.2 Nov 23, 2020
@FinnWoelm
Copy link
Contributor

Hi @fverloop,

Thanks for flagging this! I recently tried to switch to Next v10 for our next-on-netlify tests and noticed that all the preview-related tests were indeed failing. From my understanding, this seems to be a bug in Next.js that affects target: "serverless", specifically it happens in the code where Next.js looks for the jsonwebtoken code/module.

You can solve this by switching to target: "experimental-serverless-trace" in your next.config.js. This setting will somewhat increase your build time, but if that is something you can live with, then it's a good solution. We're working on improving build speed with experimental-serverless-trace.

Difference between the two modes: In serverless-target mode, Next.js inlines all dependencies into a single .js file, leading to smaller file sizes and minimal dependencies, but causing issues with non-JS code (binaries, for example). In experimental-serverless-trace-target mode, Next.js does not inline dependencies and instead uses require statements, which works well with binaries, but ends up bundling all dependencies (all of @material-ui, for example, instead of just that one component that you're using). It doesn't affect function speed/performance, but it does require more time for the initial build and upload process.

Do you want to try that and report back? 😊

@fverloop
Copy link
Author

Thanks for the detailed answer! I've tried switching to experimental-serverless-trace but this causes our build to fail because: Build exceeded maximum allowed runtime. It now takes more than 30 minutes to build our site. Build time has already gone up significantly (from 5 to 10 minutes) because it needs to generate the preview functions. 10 minutes is long, but we could live with that, 30 minutes is not realistic.

Is there another simple solution we could explore? FWIW preview mode worked perfectly on 10.0.1.

@lqze
Copy link

lqze commented Nov 25, 2020

@FinnWoelm I'm experiencing the same as @fverloop but I can't even get experimental-serverless-trace to build on Netlify, its failing when trying to package the functions

10:28:27 PM:   2. Functions bundling                                         
10:28:27 PM: ────────────────────────────────────────────────────────────────
10:28:27 PM: ​
10:28:27 PM: Packaging Functions from out_functions directory:
10:28:27 PM:  - next_api_disablepreview/next_api_disablepreview.js
10:28:27 PM:  - next_api_enablepreview/next_api_enablepreview.js
10:28:27 PM:  - next_index/next_index.js
10:28:27 PM:  - next_uri/next_uri.js
10:28:32 PM: ​
10:28:32 PM: ────────────────────────────────────────────────────────────────
10:28:32 PM:   Dependencies installation error                               
10:28:32 PM: ────────────────────────────────────────────────────────────────
10:28:32 PM: ​
10:28:32 PM:   Error message
10:28:32 PM:   A Netlify Function failed to require one of its dependencies.
10:28:32 PM:   If the dependency is a Node module, please make sure it is present in the site's top-level "package.json".
  If it is a local file instead, please make sure the file exists and its filename is correctly spelled.
10:28:32 PM: ​
10:28:32 PM:   In file "/opt/build/repo/out_functions/next_index/next_index.js"
10:28:32 PM:   Cannot find module 'konva'
10:28:32 PM:   Require stack:
10:28:32 PM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/node_modules/@netlify/zip-it-and-ship-it/src/resolve.js
10:28:32 PM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/node_modules/@netlify/zip-it-and-ship-it/src/dependencies.js
10:28:32 PM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/node_modules/@netlify/zip-it-and-ship-it/src/main.js
10:28:32 PM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/plugins_core/functions/index.js
10:28:32 PM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/commands/get.js
10:28:32 PM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/core/main.js
10:28:32 PM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/core/bin.js

I'll raise a separate issue about this..

@ehmicky
Copy link
Contributor

ehmicky commented Nov 25, 2020 •
edited
Loading

@lqze This is probably a separate issue. I think the error message should indicate a way to solve this:

Please make sure it is present in the site's top-level "package.json".

Is konva in your site's top-level package.json (and not a package.json in a sub-directory)?

@lqze
Copy link

lqze commented Nov 25, 2020 •
edited
Loading

@ehmicky Yeah this is definitely something funky with Netlify and how things are named or path'd

It is in my app's root package.json now.

After adding it to my app npm i konva I'm getting the following.

5:10:25 AM: ✅ Success! All done!
5:10:25 AM: ​
5:10:25 AM: (build.command completed in 1m 10.5s)
5:10:25 AM: ​
5:10:25 AM: ────────────────────────────────────────────────────────────────
5:10:25 AM:   2. Functions bundling                                         
5:10:25 AM: ────────────────────────────────────────────────────────────────
5:10:25 AM: ​
5:10:25 AM: Packaging Functions from out_functions directory:
5:10:25 AM:  - next_api_disablepreview/next_api_disablepreview.js
5:10:25 AM:  - next_api_enablepreview/next_api_enablepreview.js
5:10:25 AM:  - next_index/next_index.js
5:10:25 AM:  - next_uri/next_uri.js
5:10:29 AM: ​
5:10:29 AM: ────────────────────────────────────────────────────────────────
5:10:29 AM:   Dependencies installation error                               
5:10:29 AM: ────────────────────────────────────────────────────────────────
5:10:29 AM: ​
5:10:29 AM:   Error message
5:10:29 AM:   A Netlify Function failed to require one of its dependencies.
5:10:29 AM:   If the dependency is a Node module, please make sure it is present in the site's top-level "package.json".
  If it is a local file instead, please make sure the file exists and its filename is correctly spelled.
5:10:29 AM: ​
5:10:29 AM:   In file "/opt/build/repo/out_functions/next_index/next_index.js"
5:10:29 AM:   Cannot find module 'react-native'
5:10:29 AM:   Require stack:
5:10:29 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/node_modules/@netlify/zip-it-and-ship-it/src/resolve.js
5:10:29 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/node_modules/@netlify/zip-it-and-ship-it/src/dependencies.js
5:10:29 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/node_modules/@netlify/zip-it-and-ship-it/src/main.js
5:10:29 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/plugins_core/functions/index.js
5:10:29 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/commands/get.js
5:10:29 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/core/main.js
5:10:29 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/core/bin.js
5:10:29 AM: ​
5:10:29 AM:   Resolved config
5:10:29 AM:   build:
5:10:29 AM:     command: npm run build

It's as if it cant resolve any deps or something in the opt folder? Or it's not able to correctly path to it?

My package.json is the following:

},
  "dependencies": {
    "@apollo/client": "^3.2.7",
    "color": "^3.1.3",
    "date-fns": "^2.16.1",
    "graphql": "^15.4.0",
    "html-react-parser": "^0.14.1",
    "next": "^10.0.2",
    "next-compose-plugins": "^2.2.1",
    "next-images": "^1.6.2",
    "next-on-netlify": "^2.6.3",
    "next-seo": "^4.17.0",
    "next-svgr": "0.0.2",
    "pure-react-carousel": "^1.27.6",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-hook-form": "^6.11.3",
    "react-hook-inview": "^4.3.5",
    "react-is": "^17.0.1",
    "react-spring": "^9.0.0-rc.3",
    "styled-components": "^5.2.1",
    "styled-normalize": "^8.0.7",
    "typescript": "~4.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@graphql-codegen/add": "^2.0.1",
    "@graphql-codegen/cli": "^1.19.2",
    "@graphql-codegen/typescript": "^1.17.11",
    "@graphql-codegen/typescript-operations": "^1.17.10",
    "@graphql-codegen/typescript-react-apollo": "^2.1.1",
    "@storybook/addon-actions": "^6.1.1",
    "@storybook/addon-essentials": "^6.1.1",
    "@storybook/addon-links": "^6.1.1",
    "@storybook/react": "^6.1.1",
    "@types/color": "^3.0.1",
    "@types/jest": "^26.0.15",
    "@types/react-dom": "^16.9.9",
    "@types/react-is": "^16.7.1",
    "@types/styled-components": "^5.1.4",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.1",
    "babel-plugin-styled-components": "^1.11.1",
    "core-js": "^3.7.0",
    "eslint": "^7.13.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript-prettier": "^4.0.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "jest": "^26.6.3",
    "prettier": "^2.1.2",
    "react-test-renderer": "^17.0.1",
    "tsconfig-paths-webpack-plugin": "^3.3.0"
  }

I've removed the konva from above after not getting any further.

I know konva is a dep of react-spring, particularly

"react-spring": {
      "version": "9.0.0-rc.3",
      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.0.0-rc.3.tgz",
      "integrity": "sha512-VX5Gi6svgRzjGvJ7qVRQBhFN+O2IuPvkSWepIg838LNIMqlc42xdIYtoGJYSqYjNO3IocSfkHlh49WVw6hHMUg==",
      "requires": {
        "@babel/runtime": "^7.3.1",
        "@react-spring/core": "9.0.0-rc.3",
        "@react-spring/konva": "9.0.0-rc.3",
        "@react-spring/native": "9.0.0-rc.3",
        "@react-spring/three": "9.0.0-rc.3",
        "@react-spring/web": "9.0.0-rc.3",
        "@react-spring/zdog": "9.0.0-rc.3"
      }
    },

@ehmicky
Copy link
Contributor

ehmicky commented Nov 26, 2020 •
edited
Loading

@lqze This issue appears to be separate from the one initially reported by @fverloop.
Would it be possible to create a separate issue, so we don't lose sight of @fverloop's problem. Thanks!

@lindsaylevine lindsaylevine mentioned this issue Dec 3, 2020
Closed
@lindsaylevine lindsaylevine mentioned this issue Dec 18, 2020
Closed
@lindsaylevine
Copy link
Contributor

hey all! i'm going to close this issue in favor of #120, which groups several next-on-netlify issues together related to experimental-serverless-trace. this issue mentions that an improvement has been made to our internal bundling library zip-it-and-ship-it, to be released in the new year.

please feel free to re-open this issue if you think #120 does not suffice or if there's a specific piece separate from experimental-serverless-trace that still needs addressing.

@afzalsayed96
Copy link
Contributor

@lindsaylevine I understand that #120 addresses all issues with experimental-serverless-trace. Are there any plans to make target serverless work with Next v10.0.2+?

@lindsaylevine
Copy link
Contributor

@afzalsayed96 that is a very good question and need time to think about it.

@FinnWoelm FinnWoelm changed the title Preview mode broken in Next 10.0.2 Preview mode broken in Next 10.0.2 with target: "serverless": TypeError: e[t] is not a function Dec 29, 2020
@FinnWoelm
Copy link
Contributor

Hey @afzalsayed96, great point!

This issue is on Next.js' end. We just traced the error down and identified a solution. This has been filed here: vercel/next.js#20575 (in case you're curious about the details 😊).

I'm reopening this issue, so we can track progress on the issue in the next.js repo.

Note that there are currently three possible work-arounds, which I'm happy to expand on, if you'd like:

  1. Using target: "experimental-serverless-trace"
  2. Downgrading to Next v10.0.1
  3. 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 [email protected].

@FinnWoelm FinnWoelm reopened this Dec 29, 2020
@lindsaylevine
Copy link
Contributor

according to @FinnWoelm , this will be resolved in the next release of Next!!! :)

@lindsaylevine
Copy link
Contributor

next 10.0.6 is out! i just confirmed this works with next 10.0.6 and latest next-on-netlify for both targets (serverless and experimental-serverless-trace). please comment if you happen to still being have issues! <3

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
experimental-serverless-trace Next 10 priority: high
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@fverloop @lqze @FinnWoelm @ehmicky @afzalsayed96 @lindsaylevine