next.js 11.1.0 support #597

grind-t · 2021-08-12T17:35:47Z

After upgrading to version 11.1.0, when packaging the Netlify function for the Next.js page, a dependency installation error occurs (cannot find module '@babel/core').

Log:

6:56:24 PM: Build ready to start
6:56:28 PM: build-image version: c6001ed68662a13e5deb24abec2b46058c58248a
6:56:28 PM: build-image tag: v3.9.0
6:56:28 PM: buildbot version: ad437348d6c1b571799b44a035363a0f56a02090
6:56:28 PM: Fetching cached dependencies
6:56:29 PM: Starting to download cache of 183.8MB
6:56:32 PM: Finished downloading cache in 3.531456592s
6:56:32 PM: Starting to extract cache
6:56:39 PM: Finished extracting cache in 7.190007552s
6:56:39 PM: Finished fetching cache in 10.784976942s
6:56:39 PM: Starting to prepare the repo for build
6:56:40 PM: Preparing Git Reference refs/heads/main
6:56:41 PM: Parsing package.json dependencies
6:56:42 PM: Starting build script
6:56:42 PM: Installing dependencies
6:56:42 PM: Python version set to 2.7
6:56:43 PM: Started restoring cached node version
6:56:45 PM: Finished restoring cached node version
6:56:46 PM: v12.18.0 is already installed.
6:56:47 PM: Now using node v12.18.0 (npm v6.14.4)
6:56:47 PM: Started restoring cached build plugins
6:56:47 PM: Finished restoring cached build plugins
6:56:47 PM: Attempting ruby version 2.7.2, read from environment
6:56:49 PM: Using ruby version 2.7.2
6:56:49 PM: Using PHP version 5.6
6:56:49 PM: Started restoring cached node modules
6:56:49 PM: Finished restoring cached node modules
6:56:49 PM: Installing NPM modules using NPM version 6.14.4
6:56:57 PM: > core-js-pure@3.16.1 postinstall /opt/build/repo/node_modules/core-js-pure
6:56:57 PM: > node -e "try{require('./postinstall')}catch(e){}"
6:56:58 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
6:56:58 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
6:56:58 PM: added 12 packages from 7 contributors, removed 27 packages, updated 46 packages and audited 689 packages in 7.587s
6:56:58 PM: 85 packages are looking for funding
6:56:58 PM:   run `npm fund` for details
6:56:58 PM: found 0 vulnerabilities
6:56:58 PM: NPM modules installed
6:56:58 PM: Started restoring cached go cache
6:56:58 PM: Finished restoring cached go cache
6:56:58 PM: go version go1.14.4 linux/amd64
6:56:58 PM: go version go1.14.4 linux/amd64
6:56:58 PM: Installing missing commands
6:56:58 PM: Verify run directory
6:56:59 PM: 
6:56:59 PM: ────────────────────────────────────────────────────────────────
6:56:59 PM:   Netlify Build                                                 
6:56:59 PM: ────────────────────────────────────────────────────────────────
6:56:59 PM: 
6:56:59 PM: ❯ Version
6:56:59 PM:   @netlify/build 18.2.1
6:56:59 PM: 
6:56:59 PM: ❯ Flags
6:56:59 PM:   baseRelDir: true
6:56:59 PM:   deployId: 611544a8f7ae1a000758db6e
6:56:59 PM: 
6:56:59 PM: ❯ Current directory
6:56:59 PM:   /opt/build/repo
6:56:59 PM: 
6:56:59 PM: ❯ Config file
6:56:59 PM:   No config file was defined: using default values.
6:56:59 PM: 
6:56:59 PM: ❯ Context
6:56:59 PM:   production
6:56:59 PM: 
6:56:59 PM: ❯ Loading plugins
6:56:59 PM:    - @netlify/plugin-nextjs@3.8.0 from Netlify app
6:57:00 PM: 
6:57:00 PM: ────────────────────────────────────────────────────────────────
6:57:00 PM:   1. onPreBuild command from @netlify/plugin-nextjs             
6:57:00 PM: ────────────────────────────────────────────────────────────────
6:57:00 PM: 
6:57:00 PM: Using Next.js 11.1.0
6:57:00 PM: Warning: support for Next.js >=11.1.0 is experimental
6:57:00 PM: info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
6:57:01 PM: Next.js cache restored.
6:57:01 PM: 
6:57:01 PM: (@netlify/plugin-nextjs onPreBuild completed in 1.3s)
6:57:01 PM: 
6:57:01 PM: ────────────────────────────────────────────────────────────────
6:57:01 PM:   2. Build command from Netlify app                             
6:57:01 PM: ────────────────────────────────────────────────────────────────
6:57:01 PM: 
6:57:01 PM: $ npm run build
6:57:01 PM: > online-store@0.1.0 build /opt/build/repo
6:57:01 PM: > next build
6:57:02 PM: info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
6:57:03 PM: info  - Checking validity of types...
6:57:17 PM: info  - Creating an optimized production build...
6:57:18 PM: info  - Using external babel configuration from /opt/build/repo/.babelrc
6:57:18 PM: info  - Using external babel configuration from /opt/build/repo/.babelrc
6:57:22 PM: info  - Using external babel configuration from /opt/build/repo/.babelrc
6:57:22 PM: info  - Using external babel configuration from /opt/build/repo/.babelrc
6:57:50 PM: info  - Using external babel configuration from /opt/build/repo/.babelrc
6:57:50 PM: info  - Using external babel configuration from /opt/build/repo/.babelrc
6:57:50 PM: info  - Using external babel configuration from /opt/build/repo/.babelrc
6:57:50 PM: info  - Using external babel configuration from /opt/build/repo/.babelrc
6:57:53 PM: info  - Compiled successfully
6:57:53 PM: info  - Collecting page data...
6:57:55 PM: info  - Generating static pages (0/4)
6:57:56 PM: info  - Generating static pages (1/4)
6:57:56 PM: info  - Generating static pages (2/4)
6:57:56 PM: info  - Generating static pages (3/4)
6:57:57 PM: info  - Generating static pages (4/4)
6:57:57 PM: info  - Finalizing page optimization...
6:57:58 PM: Page                               Size     First Load JS
6:57:58 PM: ┌ ● / (ISR: 10 Seconds) (2022 ms)  24.3 kB         194 kB
6:57:58 PM: ├   /_app                          0 B             170 kB
6:57:58 PM: ├ ○ /404                           194 B           170 kB
6:57:58 PM: └ ○ /sign-in (721 ms)              761 B           170 kB
6:57:58 PM: + First Load JS shared by all      170 kB
6:57:58 PM:   ├ chunks/framework.2191d1.js     42.4 kB
6:57:58 PM:   ├ chunks/main.222191.js          23.4 kB
6:57:58 PM:   ├ chunks/pages/_app.666dd8.js    102 kB
6:57:58 PM:   └ chunks/webpack.04e1bc.js       1.83 kB
6:57:58 PM: λ  (Lambda)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
6:57:58 PM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
6:57:58 PM: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
6:57:58 PM:    (ISR)     incremental static regeneration (uses revalidate in getStaticProps)
6:57:58 PM: 
6:57:58 PM: (build.command completed in 56.8s)
6:57:58 PM: 
6:57:58 PM: ────────────────────────────────────────────────────────────────
6:57:58 PM:   3. onBuild command from @netlify/plugin-nextjs                
6:57:58 PM: ────────────────────────────────────────────────────────────────
6:57:58 PM: 
6:57:58 PM: Detected Next.js site. Copying files...
6:57:58 PM: ** Running Next on Netlify package **
6:57:58 PM: 🚀 Next on Netlify 🚀
6:57:58 PM: 🌍️ Copying public folder to /opt/build/repo/out
6:57:58 PM: 💼 Copying static NextJS assets to /opt/build/repo/out
6:57:58 PM: 💫 Setting up API endpoints as Netlify Functions in /opt/build/repo/netlify/functions
6:57:58 PM: 💫 Setting up pages with getInitialProps as Netlify Functions in /opt/build/repo/netlify/functions
6:57:58 PM: 💫 Setting up pages with getServerSideProps as Netlify Functions in /opt/build/repo/netlify/functions
6:57:58 PM: 🔥 Copying pre-rendered pages with getStaticProps and JSON data to /opt/build/repo/out
6:57:58 PM: 💫 Setting up pages with getStaticProps and fallback: true as Netlify Functions in /opt/build/repo/netlify/functions
6:57:58 PM: 💫 Setting up pages with getStaticProps and revalidation interval as Netlify Functions in /opt/build/repo/netlify/functions
6:57:58 PM: Warning: It looks like you're using the 'revalidate' flag in one of your Next.js pages.  Please read our docs about ISR on Netlify: https://ntl.fyi/next-isr-info🔥 Copying pre-rendered pages without props to /opt/build/repo/out
6:57:58 PM: Building 3 pages
6:57:58 PM: 🔀 Setting up redirects
6:57:58 PM: Warning: It looks like you're using the 'revalidate' flag in one of your Next.js pages.  Please read our docs about ISR on Netlify: https://ntl.fyi/next-isr-info🔀 Setting up headers
6:57:58 PM: ✅ Success! All done!
6:57:58 PM: 
6:57:58 PM: (@netlify/plugin-nextjs onBuild completed in 139ms)
6:57:58 PM: 
6:57:58 PM: ────────────────────────────────────────────────────────────────
6:57:58 PM:   4. Functions bundling                                         
6:57:58 PM: ────────────────────────────────────────────────────────────────
6:57:58 PM: 
6:57:59 PM: Packaging Functions from netlify/functions directory:
6:57:59 PM:  - next_image/next_image.js
6:57:59 PM:  - next_index/next_index.js
6:57:59 PM: 
6:58:04 PM: 
6:58:04 PM: ────────────────────────────────────────────────────────────────
6:58:04 PM:   Dependencies installation error                               
6:58:04 PM: ────────────────────────────────────────────────────────────────
6:58:04 PM: 
6:58:04 PM:   Error message
6:58:04 PM:   A Netlify Function failed to require one of its dependencies.
6:58:04 PM:   Please make sure it is present in the site's top-level "package.json".
6:58:04 PM:   In file "/opt/build/repo/netlify/functions/next_index/next_index.js"
6:58:04 PM:   Cannot find module '@babel/core'
6:58:04 PM:   Require stack:
6:58:04 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/node_dependencies/resolve.js
6:58:04 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/node_dependencies/index.js
6:58:04 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
6:58:04 PM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/plugins_core/functions/utils.js
6:58:04 PM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/plugins_core/functions/index.js
6:58:04 PM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/commands/get.js
6:58:04 PM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/core/main.js
6:58:04 PM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/core/bin.js
6:58:04 PM: 
6:58:04 PM:   Resolved config
6:58:04 PM:   build:
6:58:04 PM:     command: npm run build
6:58:04 PM:     commandOrigin: ui
6:58:04 PM:     environment:
6:58:04 PM:       - FIREBASE_CLIENT_EMAIL
6:58:04 PM:       - FIREBASE_PRIVATE_KEY
6:58:04 PM:       - NEXT_PUBLIC_FIREBASE_API_KEY
6:58:04 PM:       - NEXT_PUBLIC_FIREBASE_APP_ID
6:58:04 PM:       - NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
6:58:04 PM:       - NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
6:58:04 PM:       - NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
6:58:04 PM:       - NEXT_PUBLIC_FIREBASE_PROJECT_ID
6:58:04 PM:       - NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
6:58:04 PM:     publish: /opt/build/repo/out
6:58:04 PM:     publishOrigin: ui
6:58:04 PM:   functionsDirectory: /opt/build/repo/netlify/functions
6:58:04 PM:   headers:
6:58:10 PM:     - for: /_next/static/chunks/*      values:        cache-control: public,max-age=31536000,immutable  plugins:    - inputs: {}      origin: ui      package: '@netlify/plugin-nextjs'  redirects:    - from: /      status: 200      to: /.netlify/functions/next_index    - from: /_next/data/ckFPComZhlMX-24etGiMH/index.json      status: 200      to: /.netlify/functions/next_index    - force: true      from: /_next/image*      query:        q: ':quality'        url: ':url'        w: ':width'      status: 301      to: /nextimg/:url/:width/:quality    - from: /nextimg/*      status: 200      to: /.netlify/functions/next_imageCaching artifacts
6:58:10 PM: Started saving node modules
6:58:10 PM: Finished saving node modules
6:58:10 PM: Started saving build plugins
6:58:10 PM: Finished saving build plugins
6:58:10 PM: Started saving pip cache
6:58:10 PM: Finished saving pip cache
6:58:10 PM: Started saving emacs cask dependencies
6:58:10 PM: Finished saving emacs cask dependencies
6:58:10 PM: Started saving maven dependencies
6:58:10 PM: Finished saving maven dependencies
6:58:10 PM: Started saving boot dependencies
6:58:10 PM: Finished saving boot dependencies
6:58:10 PM: Started saving rust rustup cache
6:58:10 PM: Finished saving rust rustup cache
6:58:10 PM: Started saving go dependencies
6:58:10 PM: Finished saving go dependencies
6:58:10 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
6:58:10 PM: Creating deploy upload records
6:58:11 PM: Failing build: Failed to build site
6:58:11 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
6:58:11 PM: Finished processing build request in 1m42.379998886s

Steps to reproduce the behavior:

Deploy Next.js 11.1.0 app with page that requires Netlify Function.
See error.

Next.js: 11.1.0
plugin (if installed at fixed version): 3.8.0
next.config.js target: experimental-serverless-trace

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

rabizao · 2021-08-13T13:04:36Z

Same problem here

siddharthroy12 · 2021-08-15T04:59:24Z

Downgrading next to 11.0.1 fixed the issue for me, use yarn add next@11.0.1 or npm install next@11.0.1 accoring to your package manager

Simply007 · 2021-08-16T14:58:43Z

Same issue here - https://github.com/Kentico/kontent-starter-corporate-next-js/pull/51

l3aconator · 2021-08-16T16:31:55Z

I've run into this in the past when a library needed by the bundler wasn't included. The temporary hack was to install the missing package into your package.json until a solution is found.

lindsaylevine · 2021-08-23T04:40:30Z

hey all, thanks for the info! just came back from PTO and will try to look into this asap. stay tuned!

lindsaylevine · 2021-08-24T13:15:00Z

hello again! i believe adding esbuild as your node_bundler in your netlfy.toml (see docs here https://docs.netlify.com/configure-builds/file-based-configuration/#functions) should solve this issue. please let us know!

grind-t · 2021-08-24T13:59:55Z

Thanks for the answer! This solved the problem, I tested the site and did not notice any errors. The only thing in the log was a few warnings:

4:40:55 PM: ────────────────────────────────────────────────────────────────
4:40:55 PM:   4. Functions bundling                                         
4:40:55 PM: ────────────────────────────────────────────────────────────────
4:40:55 PM: 
4:40:55 PM: Packaging Functions from netlify/functions directory:
4:40:55 PM:  - next_image/next_image.js
4:40:55 PM:  - next_index/next_index.js
4:40:55 PM: 
4:40:56 PM:  > .netlify/plugins/node_modules/sharp/lib/output.js:4:22: error: No loader is configured for ".node" files: .netlify/plugins/node_modules/sharp/build/Release/sharp.node
4:40:56 PM:     4 │ const sharp = require('../build/Release/sharp.node');
4:40:56 PM:       ╵                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4:41:05 PM: 
4:41:05 PM: ❯ Failed to bundle functions with selected bundler (fallback used):
4:41:05 PM:    - next_image.zip
4:41:05 PM: 
4:41:05 PM: ❯ The following Node.js modules use dynamic expressions to include files:
4:41:05 PM:    - next
4:41:05 PM:    - @ampproject/toolbox-optimizer
4:41:05 PM: 
4:41:05 PM:   Because files included with dynamic expressions aren't bundled with your serverless functions by default,
  this may result in an error when invoking a function. To resolve this error, you can mark these Node.js
4:41:05 PM:   modules as external in the [functions] section of your `netlify.toml` configuration file:
4:41:05 PM: 
4:41:05 PM:   [functions]
4:41:05 PM:     external_node_modules = ["next", "@ampproject/toolbox-optimizer"]
4:41:05 PM: 
4:41:05 PM:   Visit https://ntl.fyi/dynamic-imports for more information.
4:41:05 PM: 
4:41:05 PM: 
4:41:05 PM: (Functions bundling completed in 9.8s)

lindsaylevine · 2021-08-24T14:54:10Z

@grind-t yeaaah, thanks for calling that out. please add external_node_modules = ["next", "@ampproject/toolbox-optimizer", "sharp"] to your [functions] config as well. 🙏 i'll open a new issue to address this required configuration (either a docs change or an auto-config on our end).

grind-t · 2021-08-24T15:49:58Z

Hmm, all warnings are gone, but the site crashes with the following error:

{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.","trace":["Runtime.UnhandledPromiseRejection: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:","1. You might have mismatching versions of React and the renderer (such as React DOM)","2. You might be breaking the Rules of Hooks","3. You might have more than one copy of React in the same app","See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.","    at process.<anonymous> (/var/runtime/index.js:35:15)","    at process.emit (events.js:314:20)","    at processPromiseRejections (internal/process/promises.js:209:33)","    at processTicksAndRejections (internal/process/task_queues.js:98:32)"]}

I will try all combinations of external modules, maybe I can find the one that is causing the crash.

grind-t · 2021-08-24T15:59:49Z

"next" cause crashes

lindsaylevine · 2021-08-24T18:39:50Z

@grind-t oh nooo. this is the same issue as #607. are you able to switch to target: serverless?

grind-t · 2021-08-24T21:54:05Z

@lindsaylevine Unfortunately no, I need to use the firebase compat library for the firebase ui. It doesn't work with target: serverless for some reason 😅

lindsaylevine · 2021-08-25T06:10:41Z

@grind-t oof okay well that seems to be a growing pattern! can you track on #607?

grind-t · 2021-08-25T22:34:23Z

@lindsaylevine firebase 9 has recently been released, so I think this problem should go away soon, because target: serverless only doesn't work with firebase 8 and firebase/compat as far as I know.

lindsaylevine · 2021-08-26T00:31:48Z

@grind-t gotcha. did you see my teammate's comments though? #607 (comment)

if you remove next from external_node_modules it should fix the invalid hook call issue and so you wont need to switch to target: serverless. we've opened an issue internally to deal with the fact that the build itself incorrectly suggests adding next to external_node_modules (as you saw yourself and why i told you to add it).

grind-t · 2021-08-26T10:31:31Z

@lindsaylevine Yes, my netlify.toml file now looks like this::

[functions]
  # Specifies `esbuild` for functions bundling
  node_bundler = "esbuild"
  external_node_modules = ["sharp"]

It works fine with next.js 11.1.0 and target: experimental-serverless-trace

lindsaylevine · 2021-08-26T14:24:02Z

@grind-t it doesn't throw a warning about "@ampproject/toolbox-optimizer"?

we have a PR open for adding @babel/core so esbuild wont be required for 11.1.0 once that's out

lindsaylevine added priority: high type: bug code to address defects in shipped code labels Aug 23, 2021

lindsaylevine mentioned this issue Aug 24, 2021

Add necessary external_node_modules in onPreBuild #614

Closed

lindsaylevine mentioned this issue Aug 26, 2021

fix: missing @babel/core dep in 11.1.0 #621

Merged

lindsaylevine closed this as completed in #621 Aug 26, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

next.js 11.1.0 support #597

next.js 11.1.0 support #597

grind-t commented Aug 12, 2021

rabizao commented Aug 13, 2021

siddharthroy12 commented Aug 15, 2021

Simply007 commented Aug 16, 2021

l3aconator commented Aug 16, 2021 •

edited

lindsaylevine commented Aug 23, 2021

lindsaylevine commented Aug 24, 2021

grind-t commented Aug 24, 2021

lindsaylevine commented Aug 24, 2021

grind-t commented Aug 24, 2021

grind-t commented Aug 24, 2021

lindsaylevine commented Aug 24, 2021

grind-t commented Aug 24, 2021

lindsaylevine commented Aug 25, 2021

grind-t commented Aug 25, 2021

lindsaylevine commented Aug 26, 2021

grind-t commented Aug 26, 2021

lindsaylevine commented Aug 26, 2021

next.js 11.1.0 support #597

next.js 11.1.0 support #597

Comments

grind-t commented Aug 12, 2021

rabizao commented Aug 13, 2021

siddharthroy12 commented Aug 15, 2021

Simply007 commented Aug 16, 2021

l3aconator commented Aug 16, 2021 • edited

lindsaylevine commented Aug 23, 2021

lindsaylevine commented Aug 24, 2021

grind-t commented Aug 24, 2021

lindsaylevine commented Aug 24, 2021

grind-t commented Aug 24, 2021

grind-t commented Aug 24, 2021

lindsaylevine commented Aug 24, 2021

grind-t commented Aug 24, 2021

lindsaylevine commented Aug 25, 2021

grind-t commented Aug 25, 2021

lindsaylevine commented Aug 26, 2021

grind-t commented Aug 26, 2021

lindsaylevine commented Aug 26, 2021

l3aconator commented Aug 16, 2021 •

edited