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

[shiro]

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

[hoshikitsunoda]

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!

[bluebill1049]

what's your react version?

[bluebill1049]

react hook form doesn't have a dependency on React
https://github.com/bluebill1049/react-hook-form/blob/master/package.json

only peer dependency. can you share your entire package.json?

[bluebill1049]

here is a version with latest react hook form: https://codesandbox.io/s/react-hook-form-basic-validation-rwpz2jn6ln

[shiro]

Thanks for the reply. Here's the complete list:

  "dependencies": {
    "@date-io/date-fns": "^1.3.6",
    "@hot-loader/react-dom": "^16.8.6",
    "@material-ui/core": "^4.0.2",
    "@material-ui/icons": "^4.0.1",
    "@material-ui/pickers": "^3.1.0",
    "@material/react-button": "^0.13.0",
    "@material/react-chips": "^0.13.0",
    "@material/react-dialog": "^0.13.0",
    "@material/react-icon-button": "^0.13.0",
    "@material/react-layout-grid": "^0.13.0",
    "@material/react-linear-progress": "^0.13.0",
    "@material/react-list": "^0.13.0",
    "@material/react-material-icon": "^0.13.0",
    "@material/react-menu-surface": "^0.13.0",
    "@material/react-text-field": "^0.13.0",
    "@material/react-top-app-bar": "^0.13.0",
    "@material/react-typography": "^0.13.0",
    "@rehooks/component-size": "^1.0.2",
    "@rehooks/window-size": "^1.0.2",
    "@types/d3": "^5.7.2",
    "@types/lodash-es": "^4.17.3",
    "@types/react-router-dom": "^4.3.3",
    "d3": "^5.9.2",
    "date-fns": "^2.0.0-alpha.29",
    "eslint-import-resolver-typescript": "^1.1.1",
    "firebase": "^6.1.0",
    "lodash-es": "^4.17.11",
    "material-color-hash": "^0.1.6",
    "material-ui-dropzone": "^2.3.5",
    "moment": "^2.24.0",
    "npm": "^6.9.0",
    "react": "^16.8.6",
    "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-scripts": "^3.0.1",
    "react-table": "^6.10.0",
    "react-use": "^9.4.0",
    "redux": "^4.0.1",
    "redux-react-hook": "^3.3.2",
    "redux-saga": "^1.0.2",
    "redux-thunk": "^2.3.0",
    "resize-observer-polyfill": "^1.5.1",
    "simple-react-validator": "^1.1.0",
    "tinycolor2": "^1.4.1",
    "typesafe-actions": "^4.4.0",
    "use-force-update": "^1.0.5",
    "use-react-router": "^1.0.7"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@types/react": "^16.8.19",
    "@types/react-dom": "^16.8.4",
    "@types/react-table": "^6.8.3",
    "@types/webpack-env": "^1.13.9",
    "@typescript-eslint/eslint-plugin": "^1.9.0",
    "@typescript-eslint/parser": "^1.9.0",
    "babel-loader": "^8.0.6",
    "copy-webpack-plugin": "^5.0.3",
    "css-loader": "^2.1.1",
    "eslint": "^5.16.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jest": "^22.6.4",
    "firebase-tools": "^6.11.0",
    "fork-ts-checker-webpack-plugin": "^1.3.5",
    "html-webpack-plugin": "^3.2.0",
    "http-server-spa": "^1.3.0",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.12.0",
    "react-dev-utils": "^9.0.1",
    "sass-loader": "^7.1.0",
    "source-map-loader": "^0.2.4",
    "terser-webpack-plugin": "^1.3.0",
    "ts-loader": "^6.0.2",
    "typescript": "^3.5.1",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.6.0",
    "webpack-merge": "^4.2.1"
  }

It's a lot but most of them are not related with react.
Help is much appreciated, thanks!

[bluebill1049]

can you remove react hook from and then do a quick useEffect(() => {}, []) in your app.js? see if it is stil crashing.

[shiro]

I'm calling various hooks including useEffect everywhere throughout my app, but it only crashes once I include useForm.

[bluebill1049]

can you share where you call useForm to crash the app? (the component code)

[bluebill1049]

react hook form doesn't install react for you.

[bluebill1049]

did you find out the reason why?

[bluebill1049]

cool 👍 please consider starring the repo to support if you find it useful :) and share in the community 🙏

[bluebill1049]

@hoshikitsunoda can you provide a codesandbox with this issue above.

[lling2]

@hoshikitsunoda can you provide a codesandbox with this issue above.
I'm getting the same error，May I ask how to solve it?

[firmart]

@hoshikitsunoda I had exactly the same issue. To solve it, I had to provide the second parameter onError to handleSubmit.