Form not being recognised during gatsby build - 404 response in production

[mrshanehunter]

I'm hoping someone can point me in the right direction before I lose my mind over this one little form!

Despite following the Gatsby / Netlify example to the letter it is still not being picked up in the build. Have a form working on another site (that was the first chunk of code I tried, but it didn't work this time around).

Have read countless posts and all of the debugging suggestions but still no luck. What am I doing wrong?

This is the site in question
This is the Github repo

And this is the latest of perhaps 20 builds done today ...

11:38:27 PM: Build ready to start
11:38:29 PM: build-image version: 3571f0130496395a23bffe9820bc78b4f73a6234
11:38:29 PM: build-image tag: v3.7.0
11:38:29 PM: buildbot version: 4b67c14778907027e78150ff5560728bb44534d3
11:38:29 PM: Fetching cached dependencies
11:38:29 PM: Starting to download cache of 279.8MB
11:38:31 PM: Finished downloading cache in 1.552111443s
11:38:31 PM: Starting to extract cache
11:38:45 PM: Finished extracting cache in 14.535946468s
11:38:46 PM: Finished fetching cache in 16.486446684s
11:38:46 PM: Starting to prepare the repo for build
11:38:46 PM: Preparing Git Reference refs/heads/master
11:38:48 PM: Different build dir detected, going to use the one specified in the Netlify configuration file: '' versus '/' in the Netlify UI
11:38:48 PM: Different functions path detected, going to use the one specified in the Netlify configuration file: 'functions' versus 'functions/' in the Netlify UI
11:38:49 PM: Starting build script
11:38:49 PM: Installing dependencies
11:38:49 PM: Python version set to 2.7
11:38:50 PM: Started restoring cached node version
11:38:54 PM: Finished restoring cached node version
11:38:55 PM: v12.18.0 is already installed.
11:38:56 PM: Now using node v12.18.0 (npm v6.14.4)
11:38:56 PM: Started restoring cached build plugins
11:38:56 PM: Finished restoring cached build plugins
11:38:57 PM: Attempting ruby version 2.7.1, read from environment
11:38:59 PM: Using ruby version 2.7.1
11:39:00 PM: Using PHP version 5.6
11:39:00 PM: Started restoring cached node modules
11:39:00 PM: Finished restoring cached node modules
11:39:00 PM: Started restoring cached go cache
11:39:00 PM: Finished restoring cached go cache
11:39:00 PM: go version go1.14.4 linux/amd64
11:39:00 PM: go version go1.14.4 linux/amd64
11:39:00 PM: Installing missing commands
11:39:00 PM: Verify run directory
11:39:03 PM: ​
11:39:03 PM: ────────────────────────────────────────────────────────────────
11:39:03 PM:   Netlify Build                                                 
11:39:03 PM: ────────────────────────────────────────────────────────────────
11:39:03 PM: ​
11:39:03 PM: ❯ Version
11:39:03 PM:   @netlify/build 9.11.1
11:39:03 PM: ​
11:39:03 PM: ❯ Flags
11:39:03 PM:   apiHost: api.netlify.com
11:39:03 PM:   cacheDir: /opt/build/cache
11:39:03 PM:   deployId: 60573e43908c7a00078fd8a7
11:39:03 PM:   mode: buildbot
11:39:03 PM:   testOpts:
11:39:03 PM:     silentLingeringProcesses: ''
11:39:03 PM: ​
11:39:03 PM: ❯ Current directory
11:39:03 PM:   /opt/build/repo
11:39:03 PM: ​
11:39:03 PM: ❯ Config file
11:39:03 PM:   /opt/build/repo/netlify.toml
11:39:03 PM: ​
11:39:03 PM: ❯ Context
11:39:03 PM:   production
11:39:03 PM: ​
11:39:03 PM: ────────────────────────────────────────────────────────────────
11:39:03 PM:   1. Build command from Netlify app                             
11:39:03 PM: ────────────────────────────────────────────────────────────────
11:39:03 PM: ​
11:39:03 PM: $ gatsby build
11:39:09 PM: success open and validate gatsby-configs - 0.098s
11:39:10 PM: success load plugins - 1.732s
11:39:11 PM: success onPreInit - 0.196s
11:39:11 PM: success initialize cache - 0.009s
11:39:11 PM: success copy gatsby files - 0.067s
11:39:11 PM: info [sanity] Fetching remote GraphQL schema
11:39:11 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
11:39:11 PM: info [sanity] Stitching GraphQL schemas from SDL
11:39:11 PM: success onPreBootstrap - 0.450s
11:39:11 PM: success createSchemaCustomization - 0.032s
11:39:12 PM: info [sanity] Fetching export stream for dataset
11:39:13 PM: info [sanity] Done! Exported 260 documents.
11:39:13 PM: success Checking for changed pages - 0.000s
11:39:13 PM: success source and transform nodes - 1.784s
11:39:14 PM: success building schema - 1.354s
11:39:14 PM: info Total nodes: 323, SitePage nodes: 1 (use --verbose for breakdown)
11:39:14 PM: success createPages - 0.001s
11:39:14 PM: success Checking for changed pages - 0.000s
11:39:15 PM: success createPagesStatefully - 0.190s
11:39:15 PM: success update schema - 0.188s
11:39:15 PM: success onPreExtractQueries - 0.005s
11:39:19 PM: success extract queries from components - 4.163s
11:39:19 PM: success write out redirect data - 0.012s
11:39:19 PM: success Build manifest and related icons - 0.337s
11:39:19 PM: success onPostBootstrap - 0.340s
11:39:19 PM: info bootstrap finished - 16.108s
11:39:20 PM: success run static queries - 0.560s - 5/5 8.93/s
11:39:21 PM: success run page queries - 0.875s - 19/19 21.72/s
11:39:21 PM: success write out requires - 0.007s
11:40:38 PM: warning DefinePlugin
11:40:38 PM: Conflicting values for 'process.env'
11:40:38 PM: success Building production JavaScript and CSS bundles - 77.560s
11:40:39 PM: success Rewriting compilation hashes - 0.002s
11:40:57 PM: success Building HTML renderer - 18.208s
11:40:57 PM: [2021-03-21T12:40:57.977Z]  @firebase/app:
11:40:57 PM:       Warning: This is a browser-targeted Firebase bundle but it appears it is being
11:40:57 PM:       run in a Node environment.  If running in a Node environment, make sure you
11:40:57 PM:       are using the bundle specified by the "main" field in package.json.
11:40:57 PM:       If you are using Webpack, you can specify "main" as the first item in
11:40:57 PM:       "resolve.mainFields":
11:40:57 PM:       https://webpack.js.org/configuration/resolve/#resolvemainfields
11:40:57 PM:       If using Rollup, use the @rollup/plugin-node-resolve plugin and specify "main"
11:40:57 PM:       as the first item in "mainFields", e.g. ['main', 'module'].
11:40:57 PM:       https://github.com/rollup/@rollup/plugin-node-resolve
11:40:58 PM: success Building static HTML for pages - 0.554s - 19/19 34.27/s
11:40:58 PM: success onPostBuild - 0.018s
11:40:58 PM: info Done building in 114.43100891 sec
11:40:58 PM: ​
11:40:58 PM: (build.command completed in 1m 55.1s)
11:40:58 PM: ​
11:40:58 PM: ────────────────────────────────────────────────────────────────
11:40:58 PM:   2. Functions bundling                                         
11:40:58 PM: ────────────────────────────────────────────────────────────────
11:40:58 PM: ​
11:40:58 PM: Packaging Functions from functions directory:
11:40:58 PM:  - checkoutCreate.js
11:40:58 PM: ​
11:40:59 PM: ​
11:40:59 PM: (Functions bundling completed in 902ms)
11:40:59 PM: ​
11:40:59 PM: ────────────────────────────────────────────────────────────────
11:40:59 PM:   3. Deploy site                                                
11:40:59 PM: ────────────────────────────────────────────────────────────────
11:40:59 PM: ​
11:40:59 PM: Starting to deploy site from 'public'
11:40:59 PM: Creating deploy tree 
11:40:59 PM: Creating deploy upload records
11:40:59 PM: 0 new files to upload
11:40:59 PM: 0 new functions to upload
11:40:59 PM: Site deploy was successfully initiated
11:40:59 PM: ​
11:40:59 PM: (Deploy site completed in 282ms)
11:41:00 PM: ​
11:41:00 PM: ────────────────────────────────────────────────────────────────
11:41:00 PM:   Netlify Build Complete                                        
11:41:00 PM: ────────────────────────────────────────────────────────────────
11:41:00 PM: ​
11:41:00 PM: (Netlify Build completed in 1m 56.5s)
11:41:00 PM: Starting post processing
11:41:00 PM: Caching artifacts
11:41:00 PM: Started saving node modules
11:41:00 PM: Finished saving node modules
11:41:00 PM: Started saving build plugins
11:41:00 PM: Finished saving build plugins
11:41:00 PM: Started saving pip cache
11:41:00 PM: Post processing - HTML
11:41:00 PM: Post processing - header rules
11:41:00 PM: Post processing - redirect rules
11:41:00 PM: Finished saving pip cache
11:41:00 PM: Started saving emacs cask dependencies
11:41:00 PM: Post processing done
11:41:00 PM: Finished saving emacs cask dependencies
11:41:00 PM: Started saving maven dependencies
11:41:00 PM: Finished saving maven dependencies
11:41:00 PM: Started saving boot dependencies
11:41:00 PM: Finished saving boot dependencies
11:41:00 PM: Started saving rust rustup cache
11:41:00 PM: Finished saving rust rustup cache
11:41:00 PM: Started saving go dependencies
11:41:00 PM: Finished saving go dependencies
11:41:00 PM: Build script success
11:41:00 PM: Site is live ✨
11:41:54 PM: Finished processing build request in 3m25.532520313s

[luke]

This is the starting place for forms debugging questions:

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

Looking at the site in question, it looks like there is no form in the HTML until the javascript is run.

This means there is no pure “HTML only” form. That HTML form is a prerequisite for our Forms feature to work.

The fastest way to resolve this is to allow the form to render in the browser and then copy/paste that form HTML into a new file. Then save that HTML file and include it as a static file in the publish directory.

You don’t need to submit forms using the HTML file. However, the pure HTML form must exist somewhere in the raw files of the site (before javascript is run) for our system to create the backend forms handler.

If there are other questions about this, please let us know.

[mrshanehunter]

Thanks for your help Luke. That worked

The only difference between this site and the other one where there is a form included, that Netlify picked up straight away, is the use of gatsby-browser.js and gatsby-ssr.js in this site. Do you think that could be the reason behind it not being picked up in this site (the form in the other site sits in a .js file exactly the same as in this instance)? Would be handy to know moving forward.

Cheers,

Shane.

[perry]

hi @mrshanehunter , can you explain this again one more time please? i think i follow, but i am not 100% sure, and before i make a recommendation i want to be sure. thanks!