React Hook Forms Works Locally But Not In Production

Support
1

quizzical-goodall-773ff0

So I’m trying to use react-hook-forms (Get Started) and am using
{…register(inputName)} to register each input. It works fine locally when I run ntl dev, but when I try to build on netlify I keep getting a WebpackError: TypeError: register is not a function error. Any idea what I might be doing wrong?

<input
   type="text"
   name="name"
   id="name"
   {...register("name")}
   defaultValue={getValues("name")}
   required
/>
2

Hi there, @ghughes139 :netlisparkles:

Sorry you are having trouble getting your forms to work.

This Support Guide is 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

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide the following information (this is in the above Support Guide as well):

  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. Description of anything you have tried that did or didn’t help or make things better/worse

Thanks :slight_smile:

3

Workaround if anyone else runs into this issue:

instead of register use:

onChange={e => setValue("input-name", e.target.value)}
1 Like
4

Thanks for sharing, @ghughes139 ! Glad you found a step that works here :netliconfetti:

5

For some reason it doesn’t think getValues() is a function either. Both work locally when I run ntl dev though.

This is the form I’m trying to update and use react-hook-form with:

Errors:

Current Error

1:18:23 PM: failed Building static HTML for pages - 13.789s
1:18:23 PM: error Building static HTML failed for path "/pro-questionnaire/ProQuestionnairePageOne/ProQuestionnairePageOne/"
1:18:23 PM: 
1:18:23 PM:   29 |             id="name"
1:18:23 PM:   30 |             onChange={e => setValue("name", e.target.value)}
1:18:23 PM: > 31 |             defaultValue={getValues("name")}
1:18:23 PM:      |                           ^
1:18:23 PM:   32 |             required
1:18:23 PM:   33 |           />
1:18:23 PM:   34 |         </div>
1:18:23 PM: 
1:18:23 PM:   WebpackError: TypeError: getValues is not a function
1:18:23 PM:   
1:18:23 PM:   - ProQuestionnairePageOne.js:31 
1:18:23 PM:     src/pages/pro-questionnaire/ProQuestionnairePageOne/ProQuestionnairePageOne.    js:31:27
1:18:23 PM:

Error when I was using {…register(inputfieldname)}

10:55:10 AM: failed Building static HTML for pages - 12.556s
10:55:10 AM: error Building static HTML failed for path "/pro-questionnaire/ProQuestionnairePageOne/ProQuestionnairePageOne/"
10:55:10 AM: 
10:55:10 AM:   28 |             name="name"
10:55:10 AM:   29 |             id="name"
10:55:10 AM: > 30 |             {...register("name")}
10:55:10 AM:      |                 ^
10:55:10 AM:   31 |             defaultValue={getValues("name")}
10:55:10 AM:   32 |             required
10:55:10 AM:   33 |           />
10:55:10 AM: 
10:55:10 AM:   WebpackError: TypeError: register is not a function

The site’s built in gatsby/react.

7

Hey @ghughes139,
Those errors aren’t thrown by our forms processing- it seems like a Webpack error. Wanna take a look at these Gatsby debugging docs (maybe #3 and #4?) and see if they help unblock you? Debugging HTML Builds | Gatsby

1 Like