Home
Support Forums

Next.js deployment failed

Hey everybody,

I’m having some issues trying to deploy a Next.js website I built. I’m interested to know what you think might be the problem, because I already did some debugging and tried different configs without any luck.

Website name: reapertips.netlify.app (the live website is an old build though)

Full build log:

1:48:50 PM: Build ready to start
1:48:52 PM: build-image version: fa439ad1ab9393b2c0d449d8d7c033927683f4b0
1:48:52 PM: build-image tag: v4.3.0
1:48:52 PM: buildbot version: 0f2f658d862cfe72bae7cc05c6a8de0426a5a0e2
1:48:52 PM: Fetching cached dependencies
1:48:52 PM: Starting to download cache of 418.3MB
1:48:54 PM: Finished downloading cache in 1.869105706s
1:48:54 PM: Starting to extract cache
1:49:05 PM: Finished extracting cache in 11.739417983s
1:49:06 PM: Finished fetching cache in 13.702365319s
1:49:06 PM: Starting to prepare the repo for build
1:49:06 PM: Preparing Git Reference refs/heads/develop
1:49:07 PM: Parsing package.json dependencies
1:49:07 PM: ​❯ Initial build environmentbaseRelDir: truebranch: developcontext: productioncwd: /opt/build/repofeatureFlags: []mode: buildbotrepositoryRoot: /opt/build/repositeId: 4c5161e1-9be9-43eb-9d80-9df2ec8d126c​❯ UI build settingsbaseRelDir: truebuild:  command: next build  environment:    - NETLIFY_BUILD_DEBUG  publish: outplugins:  - inputs: {}    package: '@netlify/plugin-nextjs'​❯ Resolved build environmentbranch: developbuildDir: /opt/build/repocontext: productionenv: []​❯ Resolved configbuild:  command: next build  commandOrigin: ui  environment:    - NETLIFY_BUILD_DEBUG  publish: /opt/build/repo/out  publishOrigin: uiplugins:  - inputs: {}    origin: ui    package: '@netlify/plugin-nextjs'
1:49:07 PM: Starting build script
1:49:07 PM: Installing dependencies
1:49:07 PM: Python version set to 2.7
1:49:08 PM: Started restoring cached node version
1:49:09 PM: Finished restoring cached node version
1:49:10 PM: v16.8.0 is already installed.
1:49:10 PM: Now using node v16.8.0 (npm v7.21.0)
1:49:10 PM: Started restoring cached build plugins
1:49:10 PM: Finished restoring cached build plugins
1:49:10 PM: Attempting ruby version 2.7.2, read from environment
1:49:11 PM: Using ruby version 2.7.2
1:49:12 PM: Using PHP version 8.0
1:49:12 PM: Started restoring cached yarn cache
1:49:17 PM: Finished restoring cached yarn cache
1:49:17 PM: No yarn workspaces detected
1:49:17 PM: Started restoring cached node modules
1:49:17 PM: Finished restoring cached node modules
1:49:17 PM: Installing NPM modules using Yarn version 1.22.10
1:49:18 PM: yarn install v1.22.10
1:49:18 PM: [1/4] Resolving packages...
1:49:19 PM: success Already up-to-date.
1:49:19 PM: $ husky install
1:49:19 PM: husky - Git hooks installed
1:49:19 PM: Done in 0.83s.
1:49:19 PM: NPM modules installed using Yarn
1:49:19 PM: Started restoring cached go cache
1:49:19 PM: Finished restoring cached go cache
1:49:19 PM: go version go1.16.5 linux/amd64
1:49:19 PM: go version go1.16.5 linux/amd64
1:49:19 PM: Installing missing commands
1:49:19 PM: Verify run directory
1:49:20 PM: ​
1:49:20 PM: ────────────────────────────────────────────────────────────────
1:49:20 PM:   Netlify Build                                                 
1:49:20 PM: ────────────────────────────────────────────────────────────────
1:49:20 PM: ​
1:49:20 PM: ❯ Version
1:49:20 PM:   @netlify/build 18.7.2
1:49:20 PM: ​
1:49:20 PM: ❯ Flags
1:49:20 PM:   apiHost: api.netlify.com
1:49:20 PM:   baseRelDir: true
1:49:20 PM:   branch: develop
1:49:20 PM:   buildId: 612cc5a2e240fd0007da10c3
1:49:20 PM:   buildbotServerSocket: /tmp/netlify-buildbot-socket
1:49:20 PM:   cacheDir: /opt/build/cache
1:49:20 PM:   cachedConfigPath: /tmp/netlify_config.json
1:49:20 PM:   context: production
1:49:20 PM:   cwd: /opt/build/repo
1:49:20 PM:   deployId: 612cc5a2e240fd0007da10c5
1:49:20 PM:   featureFlags:
1:49:20 PM:     - zisiEsbuildDynamicImports
1:49:20 PM:   framework: next
1:49:20 PM:   functionsDistDir: /tmp/zisi-612cc5a2e240fd0007da10c5
1:49:20 PM:   mode: buildbot
1:49:20 PM:   nodePath: /opt/buildhome/.nvm/versions/node/v16.8.0/bin/node
1:49:20 PM:   repositoryRoot: /opt/build/repo
1:49:20 PM:   saveConfig: true
1:49:20 PM:   sendStatus: true
1:49:20 PM:   siteId: 4c5161e1-9be9-43eb-9d80-9df2ec8d126c
1:49:20 PM:   statsd:
1:49:20 PM:     host: datadog-agent
1:49:20 PM:     port: 8125
1:49:20 PM:   testOpts:
1:49:20 PM:     silentLingeringProcesses: ''
1:49:20 PM: ​
1:49:20 PM: ❯ Current directory
1:49:20 PM:   /opt/build/repo
1:49:20 PM: ​
1:49:20 PM: ❯ Config file
1:49:20 PM:   No config file was defined: using default values.
1:49:20 PM: ​
1:49:20 PM: ❯ Resolved config
1:49:20 PM:   build:
1:49:20 PM:     command: next build
1:49:20 PM:     commandOrigin: ui
1:49:20 PM:     environment:
1:49:20 PM:       - NETLIFY_BUILD_DEBUG
1:49:20 PM:     publish: /opt/build/repo/out
1:49:20 PM:     publishOrigin: ui
1:49:20 PM:   plugins:
1:49:20 PM:     - inputs: {}
1:49:20 PM:       origin: ui
1:49:20 PM:       package: '@netlify/plugin-nextjs'
1:49:20 PM: ​
1:49:20 PM: ❯ Context
1:49:20 PM:   production
1:49:20 PM: ​
1:49:20 PM: ❯ Available plugins
1:49:20 PM:    - @algolia/netlify-plugin-crawler@1.0.0
1:49:20 PM:    - @bharathvaj/netlify-plugin-airbrake@1.0.2
1:49:20 PM:    - @helloample/netlify-plugin-replace@1.1.4
1:49:20 PM:    - @netlify/plugin-angular-universal@1.0.0
1:49:20 PM:    - @netlify/plugin-gatsby@1.0.3
1:49:20 PM:    - @netlify/plugin-lighthouse@2.1.2
1:49:20 PM:    - @netlify/plugin-nextjs@3.8.0
1:49:20 PM:    - @netlify/plugin-sitemap@0.8.1
1:49:20 PM:    - @sentry/netlify-build-plugin@1.1.0
1:49:20 PM:    - netlify-build-plugin-dareboost@1.2.1
1:49:20 PM:    - netlify-build-plugin-debugbear@1.0.6
1:49:20 PM:    - netlify-build-plugin-perfbeacon@1.0.3
1:49:20 PM:    - netlify-build-plugin-speedcurve@2.0.0
1:49:20 PM:    - netlify-deployment-hours-plugin@0.0.10
1:49:20 PM:    - netlify-plugin-a11y@0.0.12
1:49:20 PM:    - netlify-plugin-add-instagram@0.2.2
1:49:20 PM:    - netlify-plugin-algolia-index@0.3.0
1:49:20 PM:    - netlify-plugin-amp-server-side-rendering@1.0.2
1:49:20 PM:    - netlify-plugin-brand-guardian@1.0.1
1:49:20 PM:    - netlify-plugin-cache-nextjs@1.4.0
1:49:20 PM:    - netlify-plugin-cecil-cache@0.2.5
1:49:20 PM:    - netlify-plugin-checklinks@4.1.1
1:49:20 PM:    - netlify-plugin-chromium@1.1.4
1:49:20 PM:    - netlify-plugin-contextual-env@0.3.0
1:49:20 PM:    - netlify-plugin-cypress@2.2.0
1:49:20 PM:    - netlify-plugin-debug-cache@1.0.3
1:49:20 PM:    - netlify-plugin-encrypted-files@0.0.5
1:49:20 PM:    - netlify-plugin-fetch-feeds@0.2.3
1:49:20 PM:    - netlify-plugin-gatsby-cache@0.3.0
1:49:20 PM:    - netlify-plugin-get-env-vars@1.0.0
1:49:20 PM:    - netlify-plugin-ghost-inspector@1.0.1
1:49:20 PM:    - netlify-plugin-ghost-markdown@3.0.3
1:49:20 PM:    - netlify-plugin-gmail@1.1.0
1:49:20 PM:    - netlify-plugin-gridsome-cache@1.0.3
1:49:20 PM:    - netlify-plugin-hashfiles@4.0.2
1:49:20 PM:    - netlify-plugin-html-validate@1.0.0
1:49:20 PM:    - netlify-plugin-hugo-cache-resources@0.2.1
1:49:20 PM:    - netlify-plugin-image-optim@0.4.0
1:49:20 PM:    - netlify-plugin-inline-critical-css@1.2.0
1:49:20 PM:    - netlify-plugin-inline-functions-env@1.0.8
1:49:20 PM:    - netlify-plugin-inline-source@1.0.4
1:49:20 PM:    - netlify-plugin-is-website-vulnerable@1.0.10
1:49:20 PM:    - netlify-plugin-jekyll-cache@1.0.0
1:49:20 PM:    - netlify-plugin-js-obfuscator@1.0.20
1:49:20 PM:    - netlify-plugin-minify-html@0.3.1
1:49:20 PM:    - netlify-plugin-next-dynamic@1.0.9
1:49:20 PM:    - netlify-plugin-nimbella@2.1.0
1:49:20 PM:    - netlify-plugin-no-more-404@0.0.15
1:49:20 PM:    - netlify-plugin-pagewatch@1.0.4
1:49:20 PM:    - netlify-plugin-prerender-spa@1.0.1
1:49:20 PM:    - netlify-plugin-prisma-provider@0.3.0
1:49:20 PM:    - netlify-plugin-pushover@0.1.1
1:49:20 PM:    - netlify-plugin-qawolf@1.2.0
1:49:20 PM:    - netlify-plugin-rss@0.0.8
1:49:20 PM:    - netlify-plugin-search-index@0.1.5
1:49:20 PM:    - netlify-plugin-snyk@1.2.0
1:49:20 PM:    - netlify-plugin-stepzen@1.0.2
1:49:20 PM:    - netlify-plugin-subfont@6.0.0
1:49:20 PM:    - netlify-plugin-submit-sitemap@0.2.3
1:49:20 PM:    - netlify-plugin-to-all-events@1.3.1
1:49:20 PM:    - netlify-plugin-use-env-in-runtime@1.2.1
1:49:20 PM:    - netlify-plugin-visual-diff@2.0.0
1:49:20 PM:    - netlify-plugin-webmentions@1.1.0
1:49:20 PM:    - netlify-purge-cloudflare-on-deploy@1.2.0
1:49:20 PM: ​
1:49:20 PM: ❯ Loading plugins
1:49:20 PM:    - @netlify/plugin-nextjs@3.8.0 from Netlify app (pinned 3.8.0, latest 3.8.0, expected 3.8.0, compatible 3.8.0)
1:49:21 PM: ​
1:49:21 PM: ────────────────────────────────────────────────────────────────
1:49:21 PM:   1. onPreBuild command from @netlify/plugin-nextjs             
1:49:21 PM: ────────────────────────────────────────────────────────────────
1:49:21 PM: ​
1:49:21 PM: Using Next.js 11.1.0
1:49:21 PM: Warning: support for Next.js >=11.1.0 is experimental
1:49:21 PM: info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
1:49:21 PM: Next.js cache restored.
1:49:21 PM: ​
1:49:21 PM: (@netlify/plugin-nextjs onPreBuild completed in 751ms)
1:49:21 PM: ​
1:49:21 PM: ────────────────────────────────────────────────────────────────
1:49:21 PM:   2. Build command from Netlify app                             
1:49:21 PM: ────────────────────────────────────────────────────────────────
1:49:21 PM: ​
1:49:21 PM: $ next build
1:49:23 PM: info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
1:49:23 PM: info  - Checking validity of types...
1:49:31 PM: info  - Creating an optimized production build...
1:49:35 PM: (node:1359) [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use new ChunkGraph API
1:49:35 PM: (Use `node --trace-deprecation ...` to show where the warning was created)
1:49:35 PM: warn  - Compiled with warnings
1:49:35 PM: ./node_modules/next/dist/server/load-components.js
1:49:35 PM: Critical dependency: the request of a dependency is an expression
1:49:35 PM: ./node_modules/next/dist/server/load-components.js
1:49:35 PM: Critical dependency: the request of a dependency is an expression
1:49:35 PM: ./node_modules/next/dist/server/load-components.js
1:49:35 PM: Critical dependency: the request of a dependency is an expression
1:49:35 PM: ./node_modules/next/dist/server/require.js
1:49:35 PM: Critical dependency: the request of a dependency is an expression
1:49:35 PM: ./node_modules/next/dist/server/require.js
1:49:35 PM: Critical dependency: the request of a dependency is an expression
1:49:35 PM: ./node_modules/next/dist/server/require.js
1:49:35 PM: Critical dependency: the request of a dependency is an expression
1:49:35 PM: info  - Collecting page data...
1:49:36 PM: info  - Generating static pages (0/5)
1:49:37 PM: info  - Generating static pages (1/5)
1:49:37 PM: info  - Generating static pages (2/5)
1:49:37 PM: info  - Generating static pages (3/5)
1:49:37 PM: info  - Generating static pages (5/5)
1:49:37 PM: info  - Finalizing page optimization...
1:49:37 PM: Page                              Size     First Load JS
1:49:37 PM: ┌ ● / (625 ms)                    2.72 kB        87.3 kB
1:49:37 PM: ├   /_app                         0 B            66.8 kB
1:49:37 PM: ├ ○ /404                          194 B            67 kB
1:49:37 PM: ├ ● /downloads (572 ms)           2.95 kB        90.8 kB
1:49:37 PM: └ ● /submit (623 ms)              3.7 kB         91.6 kB
1:49:37 PM: + First Load JS shared by all     66.8 kB
1:49:37 PM:   ├ chunks/framework.b97a0e.js    42 kB
1:49:37 PM:   ├ chunks/main.7965b1.js         23.4 kB
1:49:37 PM:   ├ chunks/pages/_app.78005b.js   587 B
1:49:37 PM:   ├ chunks/webpack.ddd010.js      822 B
1:49:37 PM:   └ css/97b84e446c7462740eaf.css  662 B
1:49:37 PM: λ  (Lambda)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
1:49:37 PM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
1:49:37 PM: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
1:49:37 PM:    (ISR)     incremental static regeneration (uses revalidate in getStaticProps)
1:49:37 PM: ​
1:49:37 PM: (build.command completed in 15.6s)
1:49:37 PM: ​
1:49:37 PM: ────────────────────────────────────────────────────────────────
1:49:37 PM:   3. onBuild command from @netlify/plugin-nextjs                
1:49:37 PM: ────────────────────────────────────────────────────────────────
1:49:37 PM: ​
1:49:37 PM: Detected Next.js site. Copying files...
1:49:37 PM: ** Running Next on Netlify package **
1:49:37 PM: 🚀 Next on Netlify 🚀
1:49:37 PM: 🌍️ Copying public folder to /opt/build/repo/out
1:49:37 PM: 💼 Copying static NextJS assets to /opt/build/repo/out
1:49:37 PM: 💫 Setting up API endpoints as Netlify Functions in /opt/build/repo/netlify/functions
1:49:37 PM: 💫 Setting up pages with getInitialProps as Netlify Functions in /opt/build/repo/netlify/functions
1:49:37 PM: 💫 Setting up pages with getServerSideProps as Netlify Functions in /opt/build/repo/netlify/functions
1:49:37 PM: 🔥 Copying pre-rendered pages with getStaticProps and JSON data to /opt/build/repo/out
1:49:37 PM: 💫 Setting up pages with getStaticProps and fallback: true as Netlify Functions in /opt/build/repo/netlify/functions
1:49:37 PM: 💫 Setting up pages with getStaticProps and revalidation interval as Netlify Functions in /opt/build/repo/netlify/functions
1:49:37 PM: 🔥 Copying pre-rendered pages without props to /opt/build/repo/out
1:49:37 PM: Building 10 pages
1:49:37 PM: 🔀 Setting up redirects
1:49:37 PM: 🔀 Setting up headers
1:49:37 PM: ✅ Success! All done!
1:49:37 PM: ​
1:49:37 PM: ❯ Updated config
1:49:37 PM:   build:
1:49:37 PM:     command: next build
1:49:37 PM:     commandOrigin: ui
1:49:37 PM:     environment:
1:49:37 PM:       - NETLIFY_BUILD_DEBUG
1:49:37 PM:     publish: /opt/build/repo/out
1:49:37 PM:     publishOrigin: ui
1:49:37 PM:   functionsDirectory: /opt/build/repo/netlify/functions
1:49:37 PM:   headers:
1:49:37 PM:     - for: /_next/static/chunks/*      values:        cache-control: public, max-age=31536000, immutable  plugins:    - inputs: {}      origin: ui      package: '@netlify/plugin-nextjs'  redirects:    - conditions:        Cookie: __prerender_bypass,__next_preview_data      force: true      from: /      status: 200      to: /.netlify/functions/next_index    - conditions:        Cookie: __prerender_bypass,__next_preview_data      force: true      from: /_next/data/04tIACoASH498C6GXDsoZ/downloads.json      status: 200      to: /.netlify/functions/next_downloads    - conditions:        Cookie: __prerender_bypass,__next_preview_data      force: true      from: /_next/data/04tIACoASH498C6GXDsoZ/index.json      status: 200      to: /.netlify/functions/next_index    - conditions:        Cookie: __prerender_bypass,__next_preview_data      force: true      from: /_next/data/04tIACoASH498C6GXDsoZ/submit.json      status: 200      to: /.netlify/functions/next_submit    - conditions:        Cookie: __prerender_bypass,__next_preview_data      force: true      from: /downloads      status: 200      to: /.netlify/functions/next_downloads    - conditions:        Cookie: __prerender_bypass,__next_preview_data      force: true      from: /submit      status: 200      to: /.netlify/functions/next_submit    - 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_image​
1:49:37 PM: (@netlify/plugin-nextjs onBuild completed in 122ms)
1:49:37 PM: ​
1:49:37 PM: ────────────────────────────────────────────────────────────────
1:49:37 PM:   4. Functions bundling                                         
1:49:37 PM: ────────────────────────────────────────────────────────────────
1:49:37 PM: ​
1:49:37 PM: Packaging Functions from netlify/functions directory:
1:49:37 PM:  - next_downloads/next_downloads.js
1:49:37 PM:  - next_image/next_image.js
1:49:37 PM:  - next_index/next_index.js
1:49:37 PM:  - next_submit/next_submit.js
1:49:37 PM: ​
1:50:08 PM: ​
1:50:08 PM: (Functions bundling completed in 30.3s)
1:50:08 PM: ​
1:50:08 PM: ────────────────────────────────────────────────────────────────
1:50:08 PM:   5. onPostBuild command from @netlify/plugin-nextjs            
1:50:08 PM: ────────────────────────────────────────────────────────────────
1:50:08 PM: ​
1:50:08 PM: Next.js cache saved.
1:50:08 PM: ​
1:50:08 PM: (@netlify/plugin-nextjs onPostBuild completed in 89ms)
1:50:08 PM: ​
1:50:08 PM: ────────────────────────────────────────────────────────────────
1:50:08 PM:   6. Deploy site                                                
1:50:08 PM: ────────────────────────────────────────────────────────────────
1:50:08 PM: ​
1:50:08 PM: ​
1:50:08 PM: ❯ Uploaded config
1:50:08 PM:   No netlify.toml
1:50:08 PM: ​
1:50:08 PM: ❯ Uploaded headers
1:50:08 PM:   # Next-on-Netlify Headers
1:50:08 PM:   /_next/static/chunks/*    cache-control: public    cache-control: max-age=31536000    cache-control: immutable​
1:50:08 PM: ❯ Uploaded redirects
1:50:08 PM:   # Next-on-Netlify Redirects
1:50:08 PM:   /  /.netlify/functions/next_index  200!  Cookie=__prerender_bypass,__next_preview_data
1:50:08 PM:   /_next/data/04tIACoASH498C6GXDsoZ/downloads.json  /.netlify/functions/next_downloads  200!  Cookie=__prerender_bypass,__next_preview_data
1:50:08 PM:   /_next/data/04tIACoASH498C6GXDsoZ/index.json  /.netlify/functions/next_index  200!  Cookie=__prerender_bypass,__next_preview_data
1:50:08 PM:   /_next/data/04tIACoASH498C6GXDsoZ/submit.json  /.netlify/functions/next_submit  200!  Cookie=__prerender_bypass,__next_preview_data
1:50:08 PM:   /downloads  /.netlify/functions/next_downloads  200!  Cookie=__prerender_bypass,__next_preview_data
1:50:08 PM:   /submit  /.netlify/functions/next_submit  200!  Cookie=__prerender_bypass,__next_preview_data
1:50:08 PM:   /_next/image*  url=:url w=:width q=:quality  /nextimg/:url/:width/:quality  301!
1:50:08 PM: Starting to deploy site from 'out'
1:50:08 PM: Creating deploy tree 
1:50:08 PM: Creating deploy upload records
1:50:08 PM: 7 new files to upload
1:50:08 PM: 3 new functions to upload
1:50:11 PM:   /nextimg/*  /.netlify/functions/next_image  200​Site deploy was successfully initiated
1:50:11 PM: ​
1:50:11 PM: (Deploy site completed in 3.6s)
1:50:11 PM: Starting post processing
1:50:12 PM: ​
1:50:12 PM: ────────────────────────────────────────────────────────────────
1:50:12 PM:   Netlify Build Complete                                        
1:50:12 PM: Post processing - HTML
1:50:12 PM: ────────────────────────────────────────────────────────────────
1:50:12 PM: ​
1:50:12 PM: (Netlify Build completed in 51.4s)
1:50:12 PM: Starting post processing
1:50:12 PM: Post processing - HTML
1:50:12 PM: Caching artifacts
1:50:12 PM: Started saving node modules
1:50:12 PM: Finished saving node modules
1:50:12 PM: Started saving build plugins
1:50:12 PM: Finished saving build plugins
1:50:12 PM: Started saving yarn cache
1:50:12 PM: Starting post processing
1:50:12 PM: Post processing - HTML
1:50:12 PM: Starting post processing
1:50:12 PM: Post processing - HTML
1:50:12 PM: Starting post processing
1:50:12 PM: Post processing - HTML
1:50:18 PM: Finished saving yarn cache
1:50:18 PM: Started saving pip cache
1:50:18 PM: Finished saving pip cache
1:50:18 PM: Started saving emacs cask dependencies
1:50:18 PM: Finished saving emacs cask dependencies
1:50:18 PM: Started saving maven dependencies
1:50:18 PM: Finished saving maven dependencies
1:50:18 PM: Started saving boot dependencies
1:50:18 PM: Finished saving boot dependencies
1:50:18 PM: Started saving rust rustup cache
1:50:18 PM: Finished saving rust rustup cache
1:50:18 PM: Started saving go dependencies
1:50:18 PM: Finished saving go dependencies
1:50:18 PM: Build script success
1:51:14 PM: Finished processing build request in 2m22.322325874s

I noticed that during post-processing there are 4 “Starting HTML pre-processing”, which triggers a failed deploy according to this support guide. However, I’m not quite sure what could be the problem… maybe the netlify form I setup?

The following is the code snippet of the form (I’m using styled-components):

<form name="tips-suggestions" data-netlify="true" netlify-honeypot="bot-field" hidden>
	<textarea name="message" />
	<input type="text" name="username" />
	<input type="radio" name="credits" id="Yes, include my username in the design." />
	<input type="radio" name="credits" id="No, it's okay." />
</form>

<form name="tips-suggestions" method="post">
	<input type="hidden" name="form-name" value="tips-suggestions" />
	<FormTextInput
		name="message"
		label={{ text: tipLabel, size: 'big' }}
		description={tipDescription}
		textarea={{ placeholder: tipPlaceholder }}
		required
	/>
	<FormTextInput
		name="username"
		label={{ text: usernameLabel, size: 'default' }}
		input={{ type: 'text', placeholder: usernamePlaceholder }}
	/>
	<FormRadioGroup title={creditsLabel} name="credits" options={creditsOptions} />
	<FormTextInput name="submit" input={{ type: 'submit', value: submitButton }} required />
</form>

Let me know if you see something weird and feel free to ask questions!

Hi there, @reapertips :wave:

Welcome to the Netlify Forums, and thanks so much for including some great details in your post.

I want to make sure we cover all of our bases in supporting you. Before I bring this post to our NextJS experts, please take a look at our Forms Support Guide. I didn’t see this one linked in your above post, have you read this and followed the suggestions? It is typically the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

If you are still having problems, please provide the following:

  1. The URL for your live form as you want visitors to use it
  2. The URL of your deployed html form. In case you have a javascript form, we need to literally be linked to the html version you’ve deployed, as mentioned above (look for “ pure javascript form ”)
  3. The form name that you’ve set and that shows in our UI
  4. Any errors or logs from the Netlify build logs, dashboard or browser developer console
  5. Your public repository, if possible

Hi Hillary, thank you for your reply!

I went through the forms support guide you linked but it all looks fine to me. I even double checked my code after finding this article specific for Next.js.

Unfortunately the deployment keeps failing. That makes me believe that the issue might be somewhere else. What do you think?

Here are the details you asked me in case I still had problems:

  1. https://reapertips.netlify.app/submit
  2. Isn’t this the same as the previous point?
  3. reapertips-suggestions
  4. Check the log in my first post
  5. GitHub - Reapertips/reapertips at develop

I tried to provide as much info as possible, but since the website is currently not being deployed I can’t do much.

Let me know if you see something funky :smile:

1 Like

What’s weird is that the build process is actually successful and you can even see it in the log I provided. However it fails in the post-processing phase.

This is interesting. Does this change by any chance if you disable form detection too?

Disabling form detection made the build succeed! That’s already a good start

So it does appear that post processing is causing problems. Do you by any chance know how many files are there in the deploy that’s getting published?

No, but this is the latest commit that got deployed a few minutes ago: GitHub - Reapertips/reapertips at 726fa08cfcb62cccadcda22b3267014aa0c46eca

Edit: and this is the form component I created: reapertips/index.tsx at 726fa08cfcb62cccadcda22b3267014aa0c46eca · Reapertips/reapertips · GitHub

Edit: this is the published deploy I downloaded from netlify: WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free

This is interesting. I tried your repo and deployed it without disabling anything. Even I got the processing HTML 4 times but in the end, the deploy succeeded.

Could you try deploying the same repo as a different website and see if it magically changes anything?

Still doesn’t work :confused:

Not sure if it’s any useful or not, but in both cases I added the website by pressing on “new site from git” and then picked it from my list of repos.

Do you think it’s some kind of bug in your system?

Ahh my bad, looks like I tested the other branch in my previous attempt. I tested the develop branch now and it indeed fails (succeeds without the form).

What’s interesting is, if I remove the data-netlify=true attribute from the form and enable form detection, the deploy works.

I even tried keeping a static version of the form with the Netlify attributes and removing the data-netlify attribute from the Typescript form. It still fails.

So, something is going wrong with the form. Might be a bug. I’ll add it to our developers’ radar so they can get this checked. Thank you for reporting.

2 Likes

Thank you :slight_smile: hopefully they can spot what’s wrong

Hi @reapertips,

Please follow-along this issue:

1 Like

Thank you for opening an issue for me @hrishikesh

1 Like

Hi @reapertips,

There’s an update. The internal logs mention this part as the error:

<input type="radio" id="No, it's okay." name="credits" value="No, it's okay.">

Specifically, the value attribute which has a ' is creating problems. Would you try changing it to it is instead of it's?

1 Like

I can confirm it solved the problem :slight_smile: thank you @hrishikesh and @hillary :blush:

1 Like