react-hook-form: Invariant Violation: Invalid hook call

Describe the bug I tried to use the library with my React app today, crashes as soon as I use the hook in my code.

Uncaught Invariant Violation: 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

some relevant package versions from my package.json:

    "react-dom": "^16.8.6",
    "react-hook-form": "^3.9.0",
    "react-redux": "^7.0.3",
    "react-router": "^5.0.1",
    "react-router-dom": "^5.0.1",
    "react-hook-form": "^3.9.0",

Everything is up-to-date at the time of writing this.

To Reproduce Steps to reproduce the behavior:

Install the currently latest versions of react related libraries
Use useForm() in a functional component.
Observe the exception

Expected behavior The app should not crash.

Desktop (please complete the following information):

OS: Windows
Browser Chrome
Version 69.0.3497.92

Additional context might be related to this

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 15 (9 by maintainers)

Most upvoted comments

I’m getting the same error. I tried adding very basic hook from a tutorial example(click counter) and it works as it should but crashes as soon as I use useForm hook in the same functional component.

I followed how to fix invalid call error but there’s no duplicates, both react and react-dom have the same version(16.13.0), the hook is at the top level in the body of a function component. Tried removing node_modules and package-lock.json and reinstalling but no luck:(

Desktop (please complete the following information):

OS: macOS Sierra Browser Chrome Version 80.0.3987.122

Here’s how my code looks like

import React from 'react'
import { useForm } from 'react-hook-form'

function PostForm() {
  const { register, handleSubmit } = useForm()
  const onSubmit = data => console.log(data)
  return (
    <Wrapper>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <input
            type="text"
            id="artist"
            name="artist"
            placeholder="Artist"
            ref={register}
          />
          <input
            type="text"
            id="title"
            name="title"
            placeholder="Title"
            ref={register}
          />
          <input
            type="text"
            id="label"
            name="label"
            placeholder="Label"
            ref={register}
          />
          <input
            type="text"
            id="price"
            name="price"
            placeholder="Price"
            ref={register}
          />
          <button type="submit" id="submit-button-post" value="Submit">
            Submit
          </button>
        </div>
      </form>
    </Wrapper>
  )
}

export default PostForm

Please let me know if there’s anything else I can provide. Thank you for your help!

hoshikitsunoda on Mar 10, 2020

Removing node_modules and the lockfile and installing again fixed the issue. Thanks for the help!

shiro on Jun 7, 2019